打印

[收藏] JavaScript 经典效果集-第二期策划中

我收集的 交叉对齐的下拉菜单
复制内容到剪贴板
代码:
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
var currTimerlinePoint = 0;
var totalTimerlineFrames = 2;
var timerlineTimer;
var leftLine = 50;
var timerIn;
var timerOut;
var timerlineArray = new Array();
timerlineArray[0]='';
timerlineArray[1]='menuItemOut()';
function runTimerline()
{
//if (totalTimerlineFrames > currTimerlinePoint)
//  {
//  eval( timerlineArray[currTimerlinePoint]);
//  currTimerlinePoint ++;
//  }
//else {currTimerlinePoint = 0; clearTimeout(window.timerlineTimer); return false;}
//window.timerlineTimer = setTimeout('runTimerline()',1000);
window.timerlineTimer = setTimeout('menuItemOut()',500);
}
function stopTimerline()
{
clearTimeout(window.timerlineTimer);
//currTimerlinePoint = 0;
}

function menuItemIn()
{
    if( leftLine != 150)
     {
     item11.style.pixelLeft += 20; item11.filters.alpha.opacity += 20;
     item12.style.pixelLeft -= 20; item12.filters.alpha.opacity += 20;
     item13.style.pixelLeft += 20; item13.filters.alpha.opacity += 20;
     item14.style.pixelLeft -= 20; item14.filters.alpha.opacity += 20;
     item15.style.pixelLeft += 20; item15.filters.alpha.opacity += 20;
     item16.style.pixelLeft -= 20; item16.filters.alpha.opacity += 20;
     item17.style.pixelLeft += 20; item17.filters.alpha.opacity += 20;
     item18.style.pixelLeft -= 20; item18.filters.alpha.opacity += 20;
     item19.style.pixelLeft += 20; item19.filters.alpha.opacity += 20;
     item20.style.pixelLeft -= 20; item20.filters.alpha.opacity += 20;
     leftLine += 20;
     }
  else
     {
     clearTimeout(window.timerIn);
     return false;
     }
  timerIn=window.setTimeout('menuItemIn()',1);
}
function menuItemOut()
{
   clearTimeout(window.timerIn);
  if (leftLine != 50)
     {
      item11.style.pixelLeft -= 20; item11.filters.alpha.opacity -= 20;
      item12.style.pixelLeft += 20; item12.filters.alpha.opacity -= 20;
      item13.style.pixelLeft -= 20; item13.filters.alpha.opacity -= 20;
      item14.style.pixelLeft += 20; item14.filters.alpha.opacity -= 20;
      item15.style.pixelLeft -= 20; item15.filters.alpha.opacity -= 20;
      item16.style.pixelLeft += 20; item16.filters.alpha.opacity -= 20;
      item17.style.pixelLeft -= 20; item17.filters.alpha.opacity -= 20;
      item18.style.pixelLeft += 20; item18.filters.alpha.opacity -= 20;
      item19.style.pixelLeft -= 20; item19.filters.alpha.opacity -= 20;
      item20.style.pixelLeft += 20; item20.filters.alpha.opacity -= 20;
      leftLine -= 20;
      }
   else
     {
     clearTimeout(window.timerOut);
     return false;
     }
  timerOut=window.setTimeout("menuItemOut()",1);
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div style="position:absolute; left:0px; top:-30px"><div align=center id="menu01" style="position:absolute; left:150px; top:33px; width:100px; height:19px; z-index:1; background-color: #000099; layer-background-color: #000099; border: 1px none #000000;padding-top:3;cursor:hand;font-size:9pt" onmouseover='stopTimerline();menuItemIn()' onmouseout='runTimerline()'><font color=white>主菜单</div>
<div align=center id="item11" style="position:absolute; left:50px; top:55px; width:99px; height:19px; z-index:2; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:4;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()">菜单项一</div>
<div align=center id="item12" style="position:absolute; left:250px; top:77px; width:99px; height:19px; z-index:3; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()">菜单项二</div>
<div align=center id="item13" style="position:absolute; left:50px; top:99px; width:99px; height:19px; z-index:4; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()">菜单项三</div>
<div align=center id="item14" style="position:absolute; left:250px; top:121px; width:99px; height:19px; z-index:5; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()">菜单项四</div>
<div align=center id="item15" style="position:absolute; left:50px; top:143px; width:99px; height:19px; z-index:6; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()">菜单项五</div>
<div align=center id="item16" style="position:absolute; left:250px; top:165px; width:99px; height:19px; z-index:6; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()">菜单项六</div>
<div align=center id="item17" style="position:absolute; left:50px; top:187px; width:99px; height:19px; z-index:6; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()">菜单项七</div>
<div align=center id="item18" style="position:absolute; left:250px; top:209px; width:99px; height:19px; z-index:6; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()">菜单项八</div>
<div align=center id="item19" style="position:absolute; left:50px; top:231px; width:99px; height:19px; z-index:6; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()">菜单项九</div>
<div align=center id="item20" style="position:absolute; left:250px; top:253px; width:99px; height:19px; z-index:6; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()">菜单项十</div></div>
</body>

TOP

引用:
原帖由 lipengadmin 于 2006-9-18 12:15 发表
六十六 透明的Div提示

[html]
  
    if ( had_tips != 1 ) {
    var _ua = document.all ? ((navigator.userAgent.indexOf('MSIE 5') > 5) ? "ie5" : "ie4") : "foo";
    if (_ua != "foo" ) {
  ...
这个代码,在滚动页面后显示不正常。

TOP

引用:
原帖由 utem123 于 2006-11-1 12:32 发表
微软公司主页   http://www.microsoft.com/china/  
页面顶部颜色渐变特效,不过只适合IE浏览器
[html]




无标题文档




        
        
          &nbsp;
         
         


[ ...
而且XP下面,浏览器会提示运行插件,没什么实用价值。

TOP

好多在ff下根本就不能用
我是虫子,一只一直在努力前进的虫子

TOP

旋转,移动,从最小化到最大化的窗口



 提示:您可以先修改部分代码再运行
[ 本帖最后由 jiaona110 于 2007-6-27 09:25 编辑 ]
我是虫子,一只一直在努力前进的虫子

TOP

21CN的一个JS轮换



 提示:您可以先修改部分代码再运行

TOP

引用:
原帖由 lipengadmin 于 2006-3-8 10:23 发表
二 鼠标旁边的提示信息,类似与163登录后的页面提示效果
[html]
tip

//***********默认设置定义.*********************
tPopWait=50;//停留tWait豪秒后显示提示。
tPopShow=5000;//显示tShow豪秒后关 ...
在Firefox 中有问题,不是DOM的,不要

TOP

发现LZ提供的N多FF不支持?

TOP

四滚动的图片

里面的图片为什么不能添加和删除,急用,谢谢

TOP

同时显示农历日期的js



 提示:您可以先修改部分代码再运行

TOP

有太多的效果在FF下不好用!!!!
有太多的效果在FF下不好用!!!!


有太多的效果在FF下不好用!!!!



有太多的效果在FF下不好用!!!!



有太多的效果在FF下不好用!!!!




有太多的效果在FF下不好用!!!!




有太多的效果在FF下不好用!!!!
DIV+CSS讨论群:13669844和23629301

TOP

你们都很辛苦,只可惜兼容性太差,想能收集或者高手编写一些兼容性比较强的代码.

TOP



 提示:您可以先修改部分代码再运行
一套房子 转载的 嘿嘿
86美术网欢迎您http://www.86ms.com

TOP

我也这么想:你们都很辛苦,只可惜兼容性太差,想能收集或者高手编写一些兼容性比较强的代码.

TOP

如查要考虑到客户角度,这个还合适吗.

.荧 光 效 果
<span id="theText" style="width:100%">
<h1><font size="2">用户名:</font></h1>
</span>
<script language="JavaScript">
<!--
function SymError()
{
  return true;
}
window.onerror = SymError;
//-->
</script>
<script>
<!--
var from = 1;
var to = 4;
var delay = 55; //闪的速度
var glowColor = "#FFCC00";//颜色
var i = to;
var j = 0;
textPulseDown();
function textPulseUp()
{
if (!document.all)
return
if (i < to)
{
theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
i++;
theTimeout = setTimeout('textPulseUp()',delay);
return 0;
}
if (i = to)
{
theTimeout = setTimeout('textPulseDown()',delay);
return 0;
}
}
function textPulseDown()
{
if (!document.all)
return
if (i > from)
{
theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
i--;
theTimeout = setTimeout('textPulseDown()',delay);
return 0;
}
if (i = from)
{
theTimeout = setTimeout('textPulseUp()',delay);
return 0;
}
}
//-->
</script>
本人感觉像这种代码还是应该在站上少用的要好,考到客户体验角度了.以前我给做的一个涡轮增压器的站,用了不少这种代码,后来被大师傅批评为花裤衩站.
郁闷的那个我啊.

TOP

交叉式菜單

看了很多,大家一起传,一起互助分享的精神挺感动我的
自己刚来这里,也发一个

 提示:您可以先修改部分代码再运行
[ 本帖最后由 ChRisFy 于 2007-8-8 01:00 编辑 ]

TOP

<script type="text/javascript" src="http://image2.sina.com.cn/home/sinaflash.js"></script>通过如下脚本在HTML中写入Flash广告:

<script type="text/javascript">
var objFlash = new sinaFlash("http://ad4.sina.com.cn/200611/17/73696_gundong.swf", "", "279", "56", "7", "", false,"high");
objFlash.addParam("wmode", "opaque");
objFlash.write("flashcontent_02AE4A");
</script>
谁告诉我这段代码有什么用吗?
addparam有什么作用

TOP

很多都无法在FF下运行,老大们,关心一下通用性啊,常用用DOM方法写JS啊,

TOP

引用:
原帖由 lwkyy 于 2007-8-13 15:54 发表
很多都无法在FF下运行,老大们,关心一下通用性啊,常用用DOM方法写JS啊,
因为很多都是抄的,不是原创
我是虫子,一只一直在努力前进的虫子

TOP

引用:
原帖由 itchen 于 2006-8-8 11:17 发表
向左滚动
[html]

      
        
         
            
                       
              
                       
                       
              
            
         
        
        
        
      
   
  
  va ...
好像我用了也会停的~~