1、鼠标指向出现实用特殊提示
(资料图片)
<!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" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-CN" /><title>css打造鼠标触发效果</title><style type="text/css"><!--body {margin: 0;padding: 0;color: #000;font-size: 12px;line-height: 160%;text-align: left;height: 100%;font-family: "宋体",Tahoma ,arial,verdana,sans-serif,"Lucida Grande","Lucida Sans Unicode";}*{ margin:0; padding:0;}h2,h2 a:link,h2 a:hover,h2 a:visited{font-size: 14px;text-decoration: none;color: #000000;}.kw_from {padding:20px 0 0 0px;margin: auto;height: 300px;overflow: hidden;width: 650px;}.kw_from .sbtn{float:left;width:80px;padding: 16px 0 0 0;}.kw_from .searchMore{float:left;width:80px;padding: 4px;}#searchNav {width:430px;float: left;}#searchNav #conter1, #searchNav #conter3{float:left;width:250px;}#searchNav #conter2, #searchNav #conter4{float:left;width:180px;}#searchNav ul {padding: 0;margin: 0;list-style: none;}#searchNav li {float: left;}#searchNav li ul {display: none;top: 20px;}#searchNav li:hover ul, #searchNav li.over ul {display: block;float:left;}#searchNav ul li a{float:left;display:block;font-size:12px;padding:3px;text-decoration: none;color: #777;}#searchNav ul li a:hover{background-color:#f4f4f4;}#searchNav #jobKw{width:220px;height:18px;}#searchNav #cityKw{width:130px;height:18px;}--></style><script type="text/javascript"><!--//--><![CDATA[//><!--startList = function() {if (document.all&&document.getElementById) {navRoot = document.getElementById("searchNav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI") {node.onmouseover=function() {this.className+=" over";}node.onmouseout=function() {this.className=this.className.replace(" over", "");}}}}}window.onload=startList;//--><!]]></script></head><body><div class="kw_from"><form action="/search.html" method="get" name="searchForm" id="searchForm" onsubmit="return check()"><ul id="searchNav"><li id="conter1"><h2>找什么</h2><input id="jobKw" name="jobKw" type="text" /><ul id="conter3"><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >会计</a> </li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >网页设计</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >翻译</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >家教</a></li><li><span class="moreCity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >更多>> </a></span></li></ul></li><li id="conter2"><h2>在那里</h2><input id="cityKw" name="cityKw" type="text" /><ul id="conter4"><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >北京</a> </li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上海</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >广州</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >深圳</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >南京</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >天津</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >杭州</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >成都</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >重庆</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >武汉</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >西安</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >沈阳</a></li><li><span class="moreCity"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >更多城市>></a></span></li></ul></li></ul><div class="sbtn"><input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" /></div><div class="searchMore"><a href="search_expert.html" rel="external nofollow" >高级搜索</a><br /><a href="search_sort.html" rel="external nofollow" >分类搜索</a> </div></form></div></body></html>2、跟随鼠标的流星
<html><head><title>网页特效---跟随鼠标的流星</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"></head><body bgColor="#000000"><script language="JavaScript"><!--Clrs=new Array("ff0000","00ff00","ffffff","ff00ff","ffa500","ffff00","00ff00","ffffff","ff00ff")var speed=1;var RunTime = 0;var cntr=0;var xcntr=100;var Nslayers;var pulse=25;var onClrs;var Xpos = 421;var Ypos = 231;var _y;if (document.layers){window.captureEvents(Event.MOUSEMOVE);function xFollowMouse(evnt){Xpos = evnt.pageX;Ypos = evnt.pageY;}window.onMouseMove = xFollowMouse;document.write("<layer name="a0" left=10 top=10 bgcolor="#ff0000" clip="0,0,2,2"></layer>"+"<layer name="a1" left=10 top=10 bgcolor="#00ff00" clip="0,0,2,2"></layer>"+"<layer name="a2" left=10 top=10 bgcolor="#ffffff" clip="0,0,2,2"></layer>"+"<layer name="a3" left=10 top=10 bgcolor="#ffa500" clip="0,0,2,2"></layer>"+"<layer name="a4" left=10 top=10 bgcolor="#ff00ff" clip="0,0,2,2"></layer>"+"<layer name="a5" left=10 top=10 bgcolor="#8888ff" clip="0,0,2,2"></layer>"+"<layer name="a6" left=10 top=10 bgcolor="#fff000" clip="0,0,2,2"></layer>");}else if (document.all){function FollowMouse(){Xpos = document.body.scrollLeft+event.x;Ypos = document.body.scrollTop+event.y;}document.onmousemove = FollowMouse;document.write("<div id="ieDiv" style="position:absolute;top:0px;left:0px">"+"<div id="c" style="position:relative">"+"<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ff0000;font-size:2px"></div>"+"<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#00ff00;font-size:2px"></div>"+"<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffffff;font-size:2px"></div>"+"<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffa500;font-size:2px"></div>"+"<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ff00ff;font-size:2px"></div>"+"<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#8888ff;font-size:2px"></div>"+"<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#fff000;font-size:2px"></div>"+"</div>"+"</div>");}function sv2(){if (document.layers){for (i=0;i<7;i++){Nslayers="a"+i;document.layers[0].top=Ypos+cntr*Math.cos((RunTime+i*4.5)/5);document.layers[0].left=Xpos+cntr*Math.sin((RunTime+i*4.5)/5);var randCol=Math.round(Math.random()*8);document.layers[0].bgColor=Clrs[randCol];}cntr+=1;RunTime+=speed;stp=setTimeout("sv2()",10);if (cntr>=100){cntr=100;speed=2.5;for (i=0;i<7;i++){Nslayers="a"+i;document.layers[Nslayers].top=Ypos+cntr*Math.cos((RunTime-100)*i/90);document.layers[Nslayers].left=Xpos+cntr*Math.sin((RunTime-100)*i/90);}}if (RunTime>182){speed=0.5;for (i=0;i<7;i++){Nslayers="a"+i;document.layers[Nslayers].top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5);document.layers[Nslayers].left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5);}}}else if (document.all){for (i=0;i<ieDiv.all.c.all.length;i++){var randCol=Math.round(Math.random()*8);ieDiv.all.c.all[0].style.background=Clrs[randCol];ieDiv.all.c.all[0].style.top=Ypos+cntr*Math.cos((RunTime+i*4.5)/5);ieDiv.all.c.all[0].style.left=Xpos+cntr*Math.sin((RunTime+i*4.5)/5);}cntr+=1;RunTime+=speed;window.status=RunTime;stp=setTimeout("sv2()",10);if (cntr>=100){cntr=100;speed=2.5;for (i=0;i<ieDiv.all.c.all.length;i++){ieDiv.all.c.all[i].style.top=Ypos+cntr*Math.cos((RunTime-100)*i/90);ieDiv.all.c.all[i].style.left=Xpos+cntr*Math.sin((RunTime-100)*i/90);}}if (RunTime>182){speed=0.5;for (i=0;i<ieDiv.all.c.all.length;i++){ieDiv.all.c.all[i].style.top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5);ieDiv.all.c.all[i].style.left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5);}}}if (RunTime>210){xcntr-=10;}if (document.layers)_y=-window.innerWidth-90;else if (document.all)_y=-document.body.clientWidth-90;if (xcntr <= _y){RunTime=0;speed=1;cntr=0;xcntr=100;}}sv2()//--></script></body></html>3、跟随鼠标的三色彩带
<html><head><title>网页特效--很酷的跟随鼠标的三色彩带</title></head><body bgColor=#000000><!--将以下代码加入HTML的<Body></Body>之间--><script language="JavaScript"><!--var a_Colour="fff000";var b_Colour="00ff00";var c_Colour="ff00ff";var Size=120;var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.6;if (document.layers){window.captureEvents(Event.MOUSEMOVE);function nsMouse(evnt){xpos = window.pageYOffset+evnt.pageX+6;ypos = window.pageYOffset+evnt.pageY+16;}window.onMouseMove = nsMouse;}else if (document.all){function ieMouse(){xpos = document.body.scrollLeft+event.x+6;ypos = document.body.scrollTop+event.y+16;}document.onmousemove = ieMouse;}function swirl(){for (i = 0; i < 3; i++){YDummy[i]=ypos+Size*Math.sin((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);XDummy[i]=xpos+Size*Math.cos((1*Math.sin((ThisStep)/10))+i*2)*Math.sin((ThisStep)/4);}ThisStep+=step;setTimeout("swirl()",10);}var amount=10;if (document.layers){for (i = 0; i < amount; i++){document.write("<layer name=nsa"+i+" top=0 left=0 width="+i/2+" height="+i/2+" bgcolor="+a_Colour+"></layer>");document.write("<layer name=nsb"+i+" top=0 left=0 width="+i/2+" height="+i/2+" bgcolor="+b_Colour+"></layer>");document.write("<layer name=nsc"+i+" top=0 left=0 width="+i/2+" height="+i/2+" bgcolor="+c_Colour+"></layer>");}}else if (document.all){document.write("<div id="ODiv" style="position:absolute;top:0px;left:0px">"+"<div id="IDiv" style="position:relative">");for (i = 0; i < amount; i++){document.write("<div id=x style="position:absolute;top:0px;left:0px;width:"+i/2+";height:"+i/2+";background:"+a_Colour+";font-size:"+i/2+""></div>");document.write("<div id=y style="position:absolute;top:0px;left:0px;width:"+i/2+";height:"+i/2+";background:"+b_Colour+";font-size:"+i/2+""></div>");document.write("<div id=z style="position:absolute;top:0px;left:0px;width:"+i/2+";height:"+i/2+";background:"+c_Colour+";font-size:"+i/2+""></div>");}document.write("</div></div>");}function prepos(){var ntscp=document.layers;var msie=document.all;if (document.layers){for (i = 0; i < amount; i++){if (i < amount-1){ntscp["nsa"+i].top=ntscp["nsa"+(i+1)].top;ntscp["nsa"+i].left=ntscp["nsa"+(i+1)].left;ntscp["nsb"+i].top=ntscp["nsb"+(i+1)].top;ntscp["nsb"+i].left=ntscp["nsb"+(i+1)].left;ntscp["nsc"+i].top=ntscp["nsc"+(i+1)].top;ntscp["nsc"+i].left=ntscp["nsc"+(i+1)].left;}else{ntscp["nsa"+i].top=YDummy[0];ntscp["nsa"+i].left=XDummy[0];ntscp["nsb"+i].top=YDummy[1];ntscp["nsb"+i].left=XDummy[1];ntscp["nsc"+i].top=YDummy[2];ntscp["nsc"+i].left=XDummy[2];}}}else if (document.all){for (i = 0; i < amount; i++){if (i < amount-1){msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style.left;msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style.left;msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style.left;}else{msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];}}}setTimeout("prepos()",10);}function Start(){swirl(),prepos()}window.onload=Start;// --></script></body></html>4、鼠标经过滚动提示文字
<a href="http://www.网址.com" rel="external nofollow" _fcksavedurl="http://www.网址.com" target="_blank" onMouseOver="helpor_net_show(this,event,"网页鼠标特效")" onMouseOut="helpor_net_hide()">把鼠标放上来试试</a><div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:seashell"><layer name="nstip" width="1000px" bgColor="seashell"></layer></div><SCRIPT language="JavaScript"><!--if (!document.layers&&!document.all)event="test"function helpor_net_show(current,e,text){if (document.all&&document.readyState=="complete"){document.all.tooltip2.innerHTML="<marquee style="border:1px solid #3399ff">"+text+"</marquee>"document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10document.all.tooltip2.style.visibility="visible"}else if (document.layers){document.tooltip2.document.nstip.document.write("<b>"+text+"</b>")document.tooltip2.document.nstip.document.close()document.tooltip2.document.nstip.left=0currentscroll=setInterval("scrolltip()",100)document.tooltip2.left=e.pageX+10document.tooltip2.top=e.pageY+10document.tooltip2.visibility="show"}}function helpor_net_hide(){if (document.all)document.all.tooltip2.style.visibility="hidden"else if (document.layers){clearInterval(currentscroll)document.tooltip2.visibility="hidden"}}function scrolltip(){if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)document.tooltip2.document.nstip.left-=5elsedocument.tooltip2.document.nstip.left=150}//--></SCRIPT>5、围绕鼠标旋转的三叶空间旋浆
<html><head><title>围绕鼠标旋转的三叶空间旋浆</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"></head><body bgColor="#000000"><scriptlanguage="JavaScript"><!--//To add more stars simply add more colours in below array!!colours=new Array("ff0000","00ff00","3366ff","ff00ff","ffa500","ffffff","fff000")//Alter nothing below!!amount=colours.length;YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,ns=(document.layers)?1:0,step=0.2,currStep=0,my=0,mx=0;if (ns){for (i=0; i < amount; i++)document.write("<LAYER NAME="nsstars"+i+"" BGCOLOR="+colours[i]+" CLIP="0,0,2,2"></LAYER>");}else{document.write("<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">");for (i=0; i < amount; i++)document.write("<span id="iestars" style="position:absolute;top:0;left:0;width:2px;height:2px;background:"+colours[i]+";font-size:2px"></span>");document.write("</div></div>");}if (ns){window.captureEvents(Event.MOUSEMOVE);function nMouse(evnt){my=evnt.pageY;mx=evnt.pageX}window.onMouseMove=nMouse;}else{function iMouse(){my=event.y;mx=event.x;}document.onmousemove=iMouse}function stars(){if (!ns)ie.style.top=document.body.scrollTop;for (i=0; i < amount; i++){var layer=(document.layers)?document.layers["nsstars"+i]:iestars[i].style;layer.top= Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);}currStep+=step;}function delay(){Ydelay = YgetDelay+=(my-YgetDelay)*1/20;Xdelay = XgetDelay+=(mx-XgetDelay)*1/20;stars();setTimeout("delay()",10);}delay();//--></script><script language="JavaScript"><!-- hidefunction goHist(a){history.go(a);}//--></script></body></html>6、围绕鼠标的立体星环（摩天轮）
<html><head><title>围绕鼠标的立体星环</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"><script language="JavaScript"><!--ns=(document.layers)?1:0;Clrs=new Array("ff0000","00ff00","ffffff","ff00ff","ffa500","ffff00","00ff00","ffffff","ff00ff")var amount=8var step=0.3;var currStep=0;var Ypos=0;var Xpos=0;if (ns){for (i=0; i < amount; i++)document.write("<LAYER NAME="n"+i+"" LEFT=0 TOP=0 BGCOLOR=#FFFFFF CLIP="0,0,2,2"></LAYER>");window.captureEvents(Event.MOUSEMOVE);function nMouse(evnt){Ypos = evnt.pageY;Xpos = evnt.pageX;}window.onMouseMove=nMouse;}else{document.write("<div style="position:absolute;top:0px;left:0px">");document.write("<div style="position:relative">");for (i=0; i < amount; i++)document.write("<div id="me" style="position:absolute;top:0px;left:0px;width:2px;height:2px;font-size:2px;background:#00aaff"></div>");document.write("</div></div>");function iMouse(){Ypos=event.y+document.body.scrollTop;Xpos=event.x+document.body.scrollLeft;}document.onmousemove = iMouse;}function Comet(){for (i=0; i < amount; i++){var randCol=Math.floor(Math.random()*Clrs.length);var layer=(document.layers)?document.layers["n"+i]:me[i].style;layer.top =Ypos+60*Math.sin((currStep + i*3.1)/4)*Math.cos(currStep/10);layer.left=Xpos+60*Math.cos((currStep + i*3.1)/4);if (ns) layer.bgColor=Clrs[randCol];else layer.background=Clrs[randCol];}currStep+=step;setTimeout("Comet()",10);}window.onload=Comet;// --></script></head><body bgcolor="#000000"></body></html>7、围绕鼠标的立体旋转文字
<html><head><title>围绕鼠标的立体旋转文字</title><meta content="text/html; charset=gb2312" http-equiv="Content-Type"><meta content="Microsoft FrontPage 5.0" name="GENERATOR"></head><body><script LANGUAGE="JavaScript"><!-- Beginif (document.all) {yourLogo = "网页制作大宝库"; //Not less than 2 letters!logoFont = "Arial";logoColor = "ff0000";//Nothing needs altering below!yourLogo = yourLogo.split("");L = yourLogo.length;TrigSplit = 360 / L;Sz = new Array()logoWidth = 100;logoHeight = -30;ypos = 0;xpos = 0;step = 0.09;currStep = 0;document.write("<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">");for (i = 0; i < L; i++) {document.write("<div id="ie" style="position:absolute;top:0px;left:0px;"+"width:10px;height:10px;font-family:"+logoFont+";font-size:12px;"+"color:"+logoColor+";text-align:center">"+yourLogo[i]+"</div>");}document.write("</div></div>");function Mouse() {ypos = event.y;xpos = event.x - 5;}document.onmousemove=Mouse;function animateLogo() {outer.style.pixelTop = document.body.scrollTop;for (i = 0; i < L; i++) {ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);Sz[i] = ie[i].style.pixelTop - ypos;if (Sz[i] < 5) Sz[i] = 5;ie[i].style.fontSize = Sz[i] / 1.7;}currStep -= step;setTimeout("animateLogo()", 20);}window.onload = animateLogo;}// End --></script></body></html>8、跟随鼠标的日期时间表盘
<html><head><title>跟随鼠标的日期时间表盘</title></head><BODY><!--将以下代码加入HTML的<Body></Body>之间--><SCRIPT language=JavaScript><!--dCol="0000FF"fCol="FF0000"sCol="00FF00"mCol="000000"hCol="000000"ClockHeight=40;ClockWidth=40;ClockFromMouseY=0;ClockFromMouseX=100;d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");m=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");date=new Date();day=date.getDate();year=date.getYear();if (year < 2000) year=year+1900;TodaysDate="年 "+m[date.getMonth()]+" "+day+"日 "+d[date.getDay()]+" "+year;D=TodaysDate.split("");H="...";H=H.split("");M="....";M=M.split("");S=".....";S=S.split("");Face="1 2 3 4 5 6 7 8 9 10 11 12";font="Arial";size=1;speed=0.6;ns=(document.layers);ie=(document.all);Face=Face.split(" ");n=Face.length;a=size*10;ymouse=0;xmouse=0;scrll=0;props="<font face="+font+" size="+size+" color="+fCol+">";props2="<font face="+font+" size="+size+" color="+dCol+">";Split=360/n;Dsplit=360/D.length;HandHeight=ClockHeight/4.5HandWidth=ClockWidth/4.5HandY=-7;HandX=-2.5;scrll=0;step=0.06;currStep=0;y=new Array();x=new Array();Y=new Array();X=new Array();for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}if (ns){for (i=0; i < D.length; i++)document.write("<layer name="nsDate"+i+"" top=0 left=0 height="+a+" width="+a+"><center>"+props2+D[i]+"</font></center></layer>");for (i=0; i < n; i++)document.write("<layer name="nsFace"+i+"" top=0 left=0 height="+a+" width="+a+"><center>"+props+Face[i]+"</font></center></layer>");for (i=0; i < S.length; i++)document.write("<layer name=nsSeconds"+i+" top=0 left=0 width=15 height=15><font face=Arial size=3 color="+sCol+"><center><b>"+S[i]+"</b></center></font></layer>");for (i=0; i < M.length; i++)document.write("<layer name=nsMinutes"+i+" top=0 left=0 width=15 height=15><font face=Arial size=3 color="+mCol+"><center><b>"+M[i]+"</b></center></font></layer>");for (i=0; i < H.length; i++)document.write("<layer name=nsHours"+i+" top=0 left=0 width=15 height=15><font face=Arial size=3 color="+hCol+"><center><b>"+H[i]+"</b></center></font></layer>");}if (ie){document.write("<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">");for (i=0; i < D.length; i++)document.write("<div id="ieDate" style="position:absolute;top:0px;left:0;height:"+a+";width:"+a+";text-align:center">"+props2+D[i]+"</font></div>");document.write("</div></div>");document.write("<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">");for (i=0; i < n; i++)document.write("<div id="ieFace" style="position:absolute;top:0px;left:0;height:"+a+";width:"+a+";text-align:center">"+props+Face[i]+"</font></div>");document.write("</div></div>");document.write("<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">");for (i=0; i < H.length; i++)document.write("<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:"+hCol+";text-align:center;font-weight:bold">"+H[i]+"</div>");document.write("</div></div>");document.write("<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">");for (i=0; i < M.length; i++)document.write("<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:"+mCol+";text-align:center;font-weight:bold">"+M[i]+"</div>");document.write("</div></div>")document.write("<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">");for (i=0; i < S.length; i++)document.write("<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:"+sCol+";text-align:center;font-weight:bold">"+S[i]+"</div>");document.write("</div></div>")}(ns)?window.captureEvents(Event.MOUSEMOVE):0;function Mouse(evnt){ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;}(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;function ClockAndAssign(){time = new Date ();secs = time.getSeconds();sec = -1.57 + Math.PI * secs/30;mins = time.getMinutes();min = -1.57 + Math.PI * mins/30;hr = time.getHours();hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;if (ie){Od.style.top=window.document.body.scrollTop;Of.style.top=window.document.body.scrollTop;Oh.style.top=window.document.body.scrollTop;Om.style.top=window.document.body.scrollTop;Os.style.top=window.document.body.scrollTop;}for (i=0; i < n; i++){var F=(ns)?document.layers["nsFace"+i]:ieFace[i].style;F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);}for (i=0; i < H.length; i++){var HL=(ns)?document.layers["nsHours"+i]:ieHours[i].style;HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);}for (i=0; i < M.length; i++){var ML=(ns)?document.layers["nsMinutes"+i]:ieMinutes[i].style;ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);}for (i=0; i < S.length; i++){var SL=(ns)?document.layers["nsSeconds"+i]:ieSeconds[i].style;SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);}for (i=0; i < D.length; i++){var DL=(ns)?document.layers["nsDate"+i]:ieDate[i].style;DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);}currStep-=step;}function Delay(){scrll=(ns)?window.pageYOffset:0;Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);for (i=1; i < D.length; i++){Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);}y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);for (i=1; i < n; i++){y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);}ClockAndAssign();setTimeout("Delay()",40);}if (ns||ie)window.onload=Delay;//--></SCRIPT></body></html>9、很有特色的荧光鼠标
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>很有特色的荧光鼠标</title><meta name="GENERATOR" content="Microsoft FrontPage 5.0"></head><body id="mybody" style="filter:light(enabled=1);" bgcolor="#ffffff" text="#000000"><divid="Layer1" style="height: 32; left: 66; position: absolute; top: 41; width: 52"><dd><div align="right"><img src="images/light.gif" width="29" height="30"> </div></dd></div><p align="center"><b><font size="5">日落大道上的亚洲男孩 </font></b></p><table border="0" width="100%"><tr><td width="82%"><font face="宋体" color="#FF00FF" style="font-size: 9pt"></font><span style="font-size: 9pt">人人爱谈张爱玲，尤其在论及服饰的时候。我不能免俗，也来附庸风雅一番。张爱玲纪念文集提到她逝世时的寓所，地址非常眼熟，后来才知道那公寓就在UCLA正门附近。我和朋友好奇心起，课后前去朝圣一番，发现果真就是文集照片中的公寓，只不过屋前绿树茁壮更胜以往，和目前公寓的灰暗色调形成讽刺对比。耳闻张爱玲生前喜欢在UCLA附近不时搬迁，居无定所，像一头中枪后逃逸的狐狸，不停回头将沿路滴落的血迹舐去，以免猎人循迹跟上。 <br><br> 我以刚出道的猎人口吻说∶传言中张的住所很狼狈，她的衣物都随便搁在纸箱或超级市场收集来的塑胶袋里唷。 <br><br> 比我早来洛杉矶数年的同行朋友却说∶有何奇怪？我的衣物书籍也都塞在纸箱和塑胶袋里。搬家的时候反而方便啊。 <br><br> 朋友的粗廉生活让我很不以为然；当时我才初抵美国未久。 <br><br> 试想，任何华丽的衣裳只要一落进超级市场塑胶袋，看起来就像垃圾。把生活尽数装在塑胶袋里，岂不是将自己完全垃圾化？ <br><br> 但，在开始租屋、收集家具之后，我也开始世故驯化。留学生余钱无多，时常面临搬家压力。因此，我很少购衣；如要花钱，选择并不多。 <br><br> 从UCLA门口驱车南行，经过张爱玲故居，就来到了”ROSS“成衣批发店。ROSS陈列满坑满谷的名牌服饰，但因都是瑕疵品，比如说胸口的商标掉到肚脐位置的马球衫之类，张冠李戴，品质荒唐，所以售价低廉。许多经济能力较差的黑人和墨西哥人就来这里翻索便宜的CK、耐吉、DKNY；我加入他们肤色鲜艳的行列，结帐时将微疵的战利品装在塑胶袋里－而非百货公司的雅痞纸袋。说不定当年张爱玲也曾经蹋著脸徒步到这里找便宜货，混迹各色人种之间，没有人认出她何许人也。 <br><br> 虽然每次光顾ROSS都省了钱，而且享受与有色人种站在同一阵线的政治正确虚荣感，但每一次的经验都极其卑微沮丧。好莱坞电影中，彩色画报里，那种昂首阔步走进香蕉共和国的潇洒意象，在现实美国里却好遥远。还是认份光顾量贩店，站在平庸空间里排队，细细咀嚼外国人的贫穷滋味。 <br><br> 时装海报里，那些空灵的躯干之间，并没有留下什么空位给我者。 <br><br> 在日落大道两岸，巨幅时装广告海报一张张浮悬空中，像敦煌壁画，海报里俊男美女睥睨众生，佛似的自在庄严，日落大道一如当代加 <br><br> 州的丝路。AF，Abercrombie ＆ Fitch的白人男孩在阳光下微笑展示金身，好生慈悲。我猜美国当前年轻男性最风靡的服饰品牌之一大概就是AF，青春的傲慢包装成若无其事的天真潇洒。难怪校园里穿AF的大男孩比比皆是（怪的是，任何人穿了AF就会变得性感）；许多男同志也表示，看了AF男孩就会流口水（许多人在徵友广告中表明，想要找AF风格的男孩）。记得春天清晨我行过波士顿哈佛大学，赫然发现哈佛广场前最招摇的海报就来自AF，金发男孩的美丽笑脸占据了整个橱窗，诡异的意象。光是一张笑脸就比一家书店还要庞大。我望之却步了。 <br><br> </span></td></tr></table><script language="vbscript">dim red,gre,bludim x,y,zred=255gre=255blu=0z=100sub window_onload()call mybody.filters.light.addPoint(0,0,z,Red,Gre,Blu,100)mybody.style.cursor="hand"end subsub document_onmousemove()x=window.event.xy=window.event.ycall mybody.filters.Light.MoveLight(0, x, y, 100, 1)end sub</script><script language="javascript">//这是使图层移动的函数function move_layer(){Layer1.style.left=event.clientX+document.body.scrollLeft-50;Layer1.style.top=event.clientY+document.body.scrollTop-20;}//这里的意思是，如果鼠标移动时就调用"move_layer"函数document.onmousemove =move_layer;</script></body></html>10、跟随鼠标的幻影文字
<html><head><title>中国站长站--跟随鼠标的幻影文字</title></head><body><script LANGUAGE="JavaScript"><!-- Beginmessage = "欢迎访问网页制作大宝库!";FonT = "Verdana";ColoR = "ff0000";SizE = 3; //1 to 7 only!var amount = 5, ypos =- 50, xpos = 0, Ay = 0, Ax = 0, By = 0, Bx = 0, Cy = 0, Cx = 0, Dy = 0, Dx = 0, Ey = 0, Ex = 0;if (document.layers) {for (i = 0; i < amount; i++) {document.write("<layer name=nsl"+i+" top=0 left=0><font face="+FonT+" size="+SizE+" color="+ColoR+">"+message+"</font></layer>");}window.captureEvents(Event.MOUSEMOVE);function nsmouse(evnt) {xpos = evnt.pageX + 20;ypos = evnt.pageY + 20;}window.onMouseMove = nsmouse;}else if (document.all) {document.write("<div id="outer" style="position:absolute;top:0px;left:0px">");document.write("<div style="position:relative">");for (i = 0; i < amount; i++) {document.write("<div id="text""+i+" style="position:absolute;top:0px;left:0px;width:400px;height:20px"><font face="+FonT+" size="+SizE+" color="+ColoR+">"+message+"</font></div>")}document.write("</div>");document.write("</div>");function iemouse() {ypos = event.y + 20;xpos = event.x + 20;}window.document.onmousemove = iemouse;}function makefollow() {if (document.layers) {document.layers["nsl"+0].top = ay;document.layers["nsl"+0].left = ax;document.layers["nsl"+1].top = by;document.layers["nsl"+1].left = bx;document.layers["nsl"+2].top = cy;document.layers["nsl"+2].left = cx;document.layers["nsl"+3].top = Dy;document.layers["nsl"+3].left = Dx;document.layers["nsl"+4].top = Ey;document.layers["nsl"+4].left = Ex;}else if (document.all) {outer.style.pixelTop = document.body.scrollTop;text[0].style.pixelTop = ay;text[0].style.pixelLeft = ax;text[1].style.pixelTop = by;text[1].style.pixelLeft = bx;text[2].style.pixelTop = cy;text[2].style.pixelLeft = cx;text[3].style.pixelTop = Dy;text[3].style.pixelLeft = Dx;text[4].style.pixelTop = Ey;text[4].style.pixelLeft = Ex;}}function move() {ey = Ey += (ypos - Ey) * 0.2;ex = Ex += (xpos - Ex) * 0.2;dy = Dy += (ey - Dy) * 0.3;dx = Dx += (ex - Dx) * 0.3;cy = Cy += (dy - Cy) * 0.4;cx = Cx += (dx - Cx) * 0.4;by = By += (cy - By) * 0.5;bx = Bx += (cx - Bx) * 0.5;ay = Ay += (by - Ay) * 0.6;ax = Ax += (bx - Ax) * 0.6;makefollow();setTimeout("move()", 100);}window.onload=move;// End --></script></body></html>
关键词： 网页鼠标特效代码
