- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
带有动画效果的链接提示效果，鼠标放到文字上，提示层由下到上淡入淡出，代码有点复杂，不过很多都是无用的CSS定义，用的时候可以优化一下还是不错的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" /> <title>动画特效的悬停提示</title> <style type="text/css"> body,ul,li{margin:0;padding:0;} body{background:#cecccc;text-align:center;} a{font-size:14px;font-weight:bold;text-decoration:none;} a:hover{text-decoration:underline;} #slidediv{margin:0 auto;width:834px;text-align:center;margin-top:100px;height:201px;background:#ffffdd;border:2px solid #e3e197;} #slidediv li{float:left;width:207px;height:54px;line-height:54px;list-style:none;margin-top:70px;position:relative;} .newdiv{height:85px;width:135px;position:absolute;top:20px;background:red;left:30px;padding:0px; visibility:hidden;} .newdiv div{color:#fff;font-size:12px;height:20px;position:relative;top:10px;left:-17px;line-height:12px;} #menu1{margin-left:35px;} *html #menu1{margin-left:17px;} #copyright{margin-top:200px;} #copyright a{color:#00F;text-decoration:underline;} </style> <script type="text/javascript"> <!-- var speed=-60; var aspeed=-80; var show=0.1; var ieshow=5; var comshow=1; var comieshow=100; var D=new Function('obj','return document.getElementById(obj);') function creatediv(isongname,ilist,imainli,ialllist){ var oTempsong=new Object; oTempsong.songname=isongname; oTempsong.alllist=ialllist; oTempsong.list=ilist; oTempsong.newlist="newdiv"+ilist; oTempsong.mainli=imainli; oTempsong.slidedown=function(){ for(i=1;i<=this.ialllisst;i++){ if(D("newlist"+i).style.visibility="hidden"){ D("newlist"+i).style.visibility="hidden"; } } D(this.newlist).style.visibility="visible"; oTempsong.display(); } oTempsong.slideup=function(){ oTempsong.disappear(); } oTempsong.display=function(){ window.Obj=this; D(Obj.newlist).style.top=speed+"px"; show+=0.05; ieshow+=5; D(Obj.newlist).style.opacity=show; D(Obj.newlist).style.filter="alpha(opacity="+ieshow+")"; speed--; if(speed<=-80){window.clearTimeout(timer);speed=-60;show=0.1;ieshow=10;return;} var timer=setTimeout('Obj.display()',7); } oTempsong.disappear=function(){ window.Obj=this; D(oTempsong.newlist).style.top=aspeed+"px"; comshow-=0.05; comieshow-=5; D(Obj.newlist).style.opacity=comshow; D(Obj.newlist).style.filter="alpha(opacity="+comieshow+")"; aspeed++; if(aspeed>=-60){window.clearTimeout(timer);D(Obj.newlist).style.visibility="hidden";aspeed=-80;comshow=1;comieshow=100;return;} var timer=setTimeout('Obj.disappear()',4); } return oTempsong; } var osong1=creatediv("song1",1,"menu1",3); --> </script> </head> <body> <div id="demo"> <ul id="slidediv"> <li id="menu1"> <a href="#" title="模板无忧" id="song1" onmouseover="osong1.slidedown()" onmouseout="osong1.slideup()">模板无忧</a> <div id="newdiv1" class="newdiv"> <div>提供有质量源码下载</div><div>/</div> </div> </li> </ul> </div> </body> </html>