资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
javascript实现的又一个不错的滑动导航效果
导航,鼠标放上去看看效果
<html> <head> <title>::你会做，我也要会::</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%3E%20%0D%0A%3C!--%20%0D%0A%3C!--%20%0D%0Afunction%20MM_reloadPage(init)%20%7B%20%20%2F%2Freloads%20the%20window%20if%20Nav4%20resized%20%0D%0A%20%20if%20(init%3D%3Dtrue)%20with%20(navigator)%20%7Bif%20((appName%3D%3D%22Netscape%22)%26%26(parseInt(appVersion)%3D%3D4))%20%7B%20%0D%0A%20%20%20%20document.MM_pgW%3DinnerWidth%3B%20document.MM_pgH%3DinnerHeight%3B%20onresize%3DMM_reloadPage%3B%20%7D%7D%20%0D%0A%20%20else%20if%20(innerWidth!%3Ddocument.MM_pgW%20%7C%7C%20innerHeight!%3Ddocument.MM_pgH)%20location.reload()%3B%20%0D%0A%7D%20%0D%0AMM_reloadPage(true)%3B%20%0D%0A%2F%2F%20--%3E%20%0D%0A%0D%0Afunction%20MM_findObj(n%2C%20d)%20%7B%20%2F%2Fv4.01%20%0D%0A%20%20var%20p%2Ci%2Cx%3B%20%20if(!d)%20d%3Ddocument%3B%20if((p%3Dn.indexOf(%22%3F%22))%3E0%26%26parent.frames.length)%20%7B%20%0D%0A%20%20%20%20d%3Dparent.frames%5Bn.substring(p%2B1)%5D.document%3B%20n%3Dn.substring(0%2Cp)%3B%7D%20%0D%0A%20%20if(!(x%3Dd%5Bn%5D)%26%26d.all)%20x%3Dd.all%5Bn%5D%3B%20for%20(i%3D0%3B!x%26%26i%3Cd.forms.length%3Bi%2B%2B)%20x%3Dd.forms%5Bi%5D%5Bn%5D%3B%20%0D%0A%20%20for(i%3D0%3B!x%26%26d.layers%26%26i%3Cd.layers.length%3Bi%2B%2B)%20x%3DMM_findObj(n%2Cd.layers%5Bi%5D.document)%3B%20%0D%0A%20%20if(!x%20%26%26%20d.getElementById)%20x%3Dd.getElementById(n)%3B%20return%20x%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20P7AniMagic(el%2C%20x%2C%20y%2C%20a%2C%20b%2C%20c%2C%20s)%20%7B%20%2F%2Fv2.5%20PVII%20%0D%0A%20var%20g%2Celo%3Del%2Cf%3D%22%22%2Cm%3Dfalse%2Cd%3D%22%22%3Bx%3DparseInt(x)%3By%3DparseInt(y)%3B%20%0D%0A%20var%20t%20%3D%20'g.p7Magic%20%3D%20setTimeout(%22P7AniMagic(%5C''%2Belo%2B'%5C'%2C'%3B%20%20%0D%0A%20if%20((g%3DMM_findObj(el))!%3Dnull)%20%7Bd%3D(document.layers)%3Fg%3Ag.style%3B%7Delse%7Breturn%3B%7D%20%0D%0A%20if%20(parseInt(s)%3E0)%20%7Beval(t%2Bx%2B'%2C'%2By%2B'%2C'%2Ba%2B'%2C'%2Bb%2B'%2C'%2Bc%2B'%2C0)%22%2C'%20%2B%20s%2B')')%3Breturn%3B%7D%20%0D%0A%20var%20xx%3D(parseInt(d.left))%3FparseInt(d.left)%3A0%3B%20%0D%0A%20var%20yy%3D(parseInt(d.top))%3FparseInt(d.top)%3A0%3B%20%0D%0A%20if(parseInt(c)%3D%3D1)%20%7Bx%2B%3Dxx%3By%2B%3Dyy%3Bm%3Dtrue%3Bc%3D0%3B%7D%20%0D%0A%20else%20if%20(c%3D%3D2)%20%7Bm%3Dfalse%3BclearTimeout(g.p7Magic)%3B%7D%20%0D%0A%20else%20%7Bvar%20i%3DparseInt(a)%3B%20%0D%0A%20%20if%20(eval(g.moved))%7BclearTimeout(g.p7Magic)%3B%7D%20%0D%0A%20%20if%20(xx%3Cx)%7Bxx%2B%3Di%3Bm%3Dtrue%3Bif(xx%3Ex)%7Bxx%3Dx%3B%7D%7D%20%0D%0A%20%20if%20(xx%3Ex)%7Bxx-%3Di%3Bm%3Dtrue%3Bif(xx%3Cx)%7Bxx%3Dx%3B%7D%7D%20%0D%0A%20%20if%20(yy%3Cy)%7Byy%2B%3Di%3Bm%3Dtrue%3Bif(yy%3Ey)%7Byy%3Dy%3B%7D%7D%20%0D%0A%20%20if%20(yy%3Ey)%7Byy-%3Di%3Bm%3Dtrue%3Bif(yy%3Cy)%7Byy%3Dy%3B%7D%7D%7D%20%0D%0A%20if%20(m)%20%7Bif((navigator.appName%3D%3D%22Netscape%22)%20%26%26%20parseInt(navigator.appVersion)%3E4)%7B%20%0D%0A%20%20%20%20xx%2B%3D%22px%22%3Byy%2B%3D%22px%22%3B%7D%20%0D%0A%20%20d.left%3Dxx%3Bd.top%3Dyy%3Bg.moved%3Dtrue%3Beval(t%2Bx%2B'%2C'%2By%2B'%2C'%2Ba%2B'%2C'%2Bb%2B'%2C'%2Bc%2B'%2C0)%22%2C'%2Bb%2B')')%3B%20%0D%0A%20%20%7Delse%20%7Bg.moved%3Dfalse%3B%7D%20%0D%0A%7D%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> <style type="text/css"> <!-- .t { filter: Alpha(Opacity=50)} td { font-size: 12px; line-height: 22px} a:link { color: #FFFFFF; text-decoration: none; height: 20px; width: 63px; border-color: #33CCFF #30CCFF #30CCFF; background-color: #0099FF; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} a:visited { color: #FFFFFF; text-decoration: none; height: 20px; width: 63px; border-color: #33CCFF #30CCFF #30CCFF; background-color: #0099FF; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} a:hover { background-color: #FF66FF; height: 20px; width: 61px; border: #FFFFFF; border-style: dotted; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} --> </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1"> <div id="Layer2" style="position:absolute; left:264px; top:59px; width:67px; height:52px; z-index:2; background-color: #0068FF; layer-background-color: #0068FF; border: 1px none #000000; visibility: visible" class="t"> <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"> <tr> <td align="center" valign="top"><font color="#FFFFFF" onMouseOver="P7AniMagic('Layer2',210,35,5,30,0,0)" onMouseOut="P7AniMagic('Layer2',264,59,5,30,0,0)">on 1 <a href="#;" _ewebeditor_ta_href="%23%3B">第一项</a> <a href="#;" _ewebeditor_ta_href="%23%3B">第二项</a> <a href="#;" _ewebeditor_ta_href="%23%3B">第三项</a> </font></td> </tr> </table> </div> <div id="Layer3" style="position:absolute; left:264px; top:81px; width:66px; height:84px; z-index:3; background-color: #0066FF; layer-background-color: #0066FF; border: 1px none #000000; visibility: visible" class="t"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div align="center"><font color="#FFFFFF" onMouseOver="P7AniMagic('Layer3',210,55,5,30,0,0)" onMouseOut="P7AniMagic('Layer3',264,81,5,30,0,0)">on 2 <a href="#;" _ewebeditor_ta_href="%23%3B">第一项</a> <a href="#;" _ewebeditor_ta_href="%23%3B">第二项</a> <a href="#;" _ewebeditor_ta_href="%23%3B">第三项</a> </font></div> </td> </tr> </table> </div> <div id="Layer4" style="position:absolute; width:68px; height:80px; z-index:4; left: 264px; top: 102px; background-color: #0064FF; layer-background-color: #0064FF; border: 1px none #000000; visibility: visible" class="t"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <div align="center"><font color="#FFFFFF" onMouseOver="P7AniMagic('Layer4',210,75,5,30,0,0)" onMouseOut="P7AniMagic('Layer4',264,102,5,30,0,0)">on 3 <a href="#;" _ewebeditor_ta_href="%23%3B">第一项</a> <a href="#;" _ewebeditor_ta_href="%23%3B">第二项</a> <a href="#;" _ewebeditor_ta_href="%23%3B">第三项</a> </font></div> </td> </tr> </table> </div> <div id="Layer5" style="position:absolute; width:65px; height:127px; z-index:5; left: 265px; top: 56px"> <table width="100%" border="0" cellspacing="0" cellpadding="0" height="72"> <tr> <td height="24" onMouseOver="P7AniMagic('Layer2',210,35,5,30,0,0)" onMouseOut="P7AniMagic('Layer2',264,59,5,30,0,0)"> </td> </tr> <tr> <td height="24" onMouseOver="P7AniMagic('Layer3',210,55,5,30,0,0)" onMouseOut="P7AniMagic('Layer3',264,81,5,30,0,0)"> </td> </tr> <tr> <td height="24" onMouseOver="P7AniMagic('Layer4',210,75,5,30,0,0)" onMouseOut="P7AniMagic('Layer4',264,102,5,30,0,0)"> </td> </tr> </table> </div> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程