首页 > 代码库 > JavaScript特效源码(4、鼠标特效)
JavaScript特效源码(4、鼠标特效)
1、鼠标感应--渐现特效
鼠标感应渐显图片[平时很模糊的图片鼠标一放上就显示清楚][修改图片名称即可][共2步]====1、将以下代码加入HTML的<head></head>之间：<script language="JavaScript1.2">function makevisible(cur,which){if (which==0)cur.filters.alpha.opacity=100elsecur.filters.alpha.opacity=20}</script>====2、将以下代码加入到HTML的<body><body>之间：<img src="http://www.mamicode.com/想要显示的图片.gif" style="filter:alpha(opacity=20)" onm ouseOver="makevisible(this,0)" onm ouseOut="makevisible(this,1)"> 2、鼠标感应--弹出警告框
鼠标感应-弹出警告框[修改文字即可][共1步][其实这个效果也没有多大用处，但在个别地方放上一个也能增色不少！^-^]====1、将以下代码加入到HTML的<body></body>之间：<a href onm ouseover="alert(‘^-^哈哈上当了，其实什么都没有！‘)">想听笑话吗？</a>
3、跟随鼠标的* 特效
跟随鼠标的*[推荐][共2步][无须修改][顺便告诉你并不一定非用*发挥你的想象改吧！不过好象还是*比较漂亮！]====1、将以下代码加入到HEML的<head></head>之间：<STYLE TYPE="text/css"><!--BODY{overflow:scroll;overflow-x:hidden;}.s1{position : absolute;font-size : 12pt;color : blue;visibility: hidden;}.s2{position : absolute;font-size : 20pt;color : red;visibility : hidden;}.s3{position : absolute;font-size : 16pt;color : gold;visibility : hidden;}.s4{position : absolute;font-size : 14pt;color : lime;visibility : hidden;}--></STYLE>====2、将以下代码加入HTML的<body></body>之间：<body bgcolor="#FFFFFF"><DIV ID="div1" CLASS="s1">*</DIV><DIV ID="div2" CLASS="s2">*</DIV><DIV ID="div3" CLASS="s3">*</DIV><DIV ID="div4" CLASS="s4">*</DIV><script language="javascript" type="text/javascript" class="s5">var nav = (document.layers);var tmr = null;var spd = 50;var x = 0;var x_offset = 5;var y = 0;var y_offset = 15;if(nav) document.captureEvents(Event.MOUSEMOVE);document.onmousemove = get_mouse; function get_mouse(e){ x = (nav) ? e.pageX : event.clientX+document.body.scrollLeft;y = (nav) ? e.pageY : event.clientY+document.body.scrollTop;x += x_offset;y += y_offset;beam(1); }function beam(n){if(n<5){if(nav){ eval("document.div"+n+".top="+y);eval("document.div"+n+".left="+x);eval("document.div"+n+".visibility=‘visible‘");} else{eval("div"+n+".style.top="+y);eval("div"+n+".style.left="+x);eval("div"+n+".style.visibility=‘visible‘");}n++;tmr=setTimeout("beam("+n+")",spd);}else{clearTimeout(tmr);fade(4);} } function fade(n){if(n>0) {if(nav)eval("document.div"+n+".visibility=‘hidden‘");else eval("div"+n+".style.visibility=‘hidden‘"); n--;tmr=setTimeout("fade("+n+")",spd);}else clearTimeout(tmr);}// --></script></body> 4、跟随鼠标的文字特效
跟随鼠标的文字[修改显示的文字及颜色代码即可][共1步]====1、将以下代码加入HTML的<body></body>之间<style type="text/css">.spanstyle {position:absolute;visibility:visible;top:-50px;font-size:9pt;color: #000000;font-weight:bold;}</style><script>var x,yvar step=20var flag=0var message="javascript源码大全。"message=message.split("")var xpos=new Array()for (i=0;i<=message.length-1;i++) {xpos[i]=-50}var ypos=new Array()for (i=0;i<=message.length-1;i++) {ypos[i]=-50}function handlerMM(e){x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientXy = (document.layers) ? e.pageY : document.body.scrollTop+event.clientYflag=1}function makesnake() {if (flag==1 && document.all) {for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1] }xpos[0]=x+stepypos[0]=yfor (i=0; i<message.length-1; i++) {var thisspan = eval("span"+(i)+".style")thisspan.posLeft=xpos[i]thisspan.posTop=ypos[i] } }else if (flag==1 && document.layers) {for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1] }xpos[0]=x+stepypos[0]=yfor (i=0; i<message.length-1; i++) {var thisspan = eval("document.span"+i)thisspan.left=xpos[i]thisspan.top=ypos[i]} }var timer=setTimeout("makesnake()",30)}</script><body onl oad="makesnake()" ><script>for (i=0;i<=message.length-1;i++) {document.write("<span id=‘span"+i+"‘class=‘spanstyle‘>")document.write(message[i])document.write("</span>")}if (document.layers){document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;</script> 5、跟随鼠标的图片
跟随鼠标的图片[修改图片名称及路径共2步]====1、将以下的代码加入到HEML的<head></head>之间：<!-- 以下代码是设定smile的代码 --><script LANGUAGE="JavaScript">var newtop=0var newleft=0if (navigator.appName == "Netscape") {layerStyleRef="layer.";layerRef="document.layers";styleSwitch="";}else{layerStyleRef="layer.style.";layerRef="document.all";styleSwitch=".style";}function doMouseMove() {layerName = ‘iit‘eval(‘var curElement=‘+layerRef+‘["‘+layerName+‘"]‘)eval(layerRef+‘["‘+layerName+‘"]‘+styleSwitch+‘.visibility="hidden"‘)eval(‘curElement‘+styleSwitch+‘.visibility="visible"‘)eval(‘newleft=document.body.clientWidth-curElement‘+styleSwitch+‘.pixelWidth‘)eval(‘newtop=document.body.clientHeight-curElement‘+styleSwitch+‘.pixelHeight‘)eval(‘height=curElement‘+styleSwitch+‘.height‘)eval(‘width=curElement‘+styleSwitch+‘.width‘)width=parseInt(width)height=parseInt(height)if (event.clientX > (document.body.clientWidth - 5 - width)){newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width}else{newleft=document.body.scrollLeft + event.clientX}eval(‘curElement‘+styleSwitch+‘.pixelLeft=newleft‘)if (event.clientY > (document.body.clientHeight - 5 - height)){newtop=document.body.clientHeight + document.body.scrollTop - 5 - height}else{newtop=document.body.scrollTop + event.clientY}eval(‘curElement‘+styleSwitch+‘.pixelTop=newtop‘)}document.onmousemove = doMouseMove;</script>====2、将以下代码加入到HEML的<body></body>之间：<!-- 以下代码是设定此页的鼠标样式代码 --><script language="javascript">if (navigator.appName == "Netscape") {}else{document.write(‘<div ID=OuterDiv>‘)document.write(‘<img ID=iit src="http://www.mamicode.com/想要显示的图片.gif" STYLE="position:absolute;TOP:5pt;LEFT:5pt;Z-INDEX:10;visibility:hidden;">‘)document.write(‘</div>‘)}</script> 6、跟随鼠标的萤火虫
跟随鼠标的萤火虫[无须修改][]共1步]====1、将以下代码加入HEML的<body></body>之间：<script language="JavaScript">if (!document.layers&&!document.all)event="test"function showtip2(current,e,text){if (document.all&&document.readyState=="complete"){document.all.tooltip2.innerHTML=‘<marquee style="border:1px solid black">‘+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 hidetip2(){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><script language="JavaScript">function YY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep) { //v1.2if ((document.layers)||(document.all)){with (Math) {yynextx= eval(yyfnx)}with (Math) {yynexty= eval(yyfny)}yycnt=(yyloop && yycnt>=yystep*yybilder)?0:yycnt+yystep;if (document.layers){eval(yydiv+".top="+(yynexty+yytop))eval(yydiv+".left="+(yynextx+yyleft)) }if (document.all){eval("yydiv=yydiv.replace(/.layers/gi, ‘.all‘)");eval(yydiv+".style.pixelTop="+(yynexty+yytop));eval(yydiv+".style.pixelLeft="+(yynextx+yyleft)); }argStr=‘YY_Layerfx(‘+yyleft+‘,‘+yytop+‘,"‘+yyfnx+‘","‘+yyfny+‘","‘+yydiv+‘",‘+yybilder+‘,‘+yyloop+‘,‘+yyto+‘,‘+yycnt+‘,‘+yystep+‘)‘;if (yycnt<=yystep*yybilder){eval(yydiv+".yyto=setTimeout(argStr,yyto)");} }}function YY_Mousetrace(evnt) { if (yyns4){if (evnt.pageX) {yy_ml=evnt.pageX; yy_mt=evnt.pageY;} }else{yy_ml=(event.clientX + document.body.scrollLeft);yy_mt=(event.clientY + document.body.scrollTop);}if (yy_tracescript)eval(yy_tracescript)}</script><script language="JavaScript">function PopWin(){var PopWin = window.open("new.htm","PopWin","toolbar=no,directries=no,scrollBars=yes,height=350,width=400");}</script><body><div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:lightyellow"><layer name="nstip" width="1000px" bgColor="lightyellow"></layer></div><div id="yyd0"style="position:absolute; left:10px; top:50px; width:3px; height:3px; z-index:1; background-color: #19636c; layer-background-color: #19636c; border: 1px none #000000; clip: rect(0 3 3 0)"></div><divid="yyd1"style="position:absolute; left:20px; top:50px; width:3px; height:3px; z-index:1; background-color: #708574; layer-background-color: #708574; border: 1px none #000000; clip: rect(0 3 3 0)"></div><divid="yyd2"style="position:absolute; left:30px; top:50px; width:3px; height:3px; z-index:1; background-color: #379bbf; layer-background-color: #379bbf; border: 1px none #000000; clip: rect(0 3 3 0)"></div><divid="yyd3"style="position:absolute; left:40px; top:50px; width:3px; height:3px; z-index:1; background-color: #25184c; layer-background-color: #25184c; border: 1px none #000000; clip: rect(0 3 3 0)"></div><divid="yyd4"style="position:absolute; left:50px; top:50px; width:3px; height:3px; z-index:1; background-color: #31bd3c; layer-background-color: #31bd3c; border: 1px none #000000; clip: rect(0 3 3 0)"></div><divid="yyd5"style="position:absolute; left:60px; top:50px; width:3px; height:3px; z-index:1; background-color: #c11efd; layer-background-color: #c11efd; border: 1px none #000000; clip: rect(0 3 3 0)"></div><script>var yyns4=window.Event?true:false; var yy_mt = 0; var yy_ml = 0;document.onmousemove = YY_Mousetrace;yy_tracescript = ‘‘;if (yyns4){ document.captureEvents(Event.mousemove);YY_Mousetrace(‘‘,‘,document.YY_Mousetrace1‘)}YY_Layerfx(0,0,‘yy_ml+cos((15*sin(yycnt/39.83007847812662))+0)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)‘,‘yy_mt+sin((15*sin(yycnt/34.224861639800686))+0)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)‘,‘document.layers[\‘yyd0\‘]‘,2000,true,80,0,1);YY_Layerfx(0,0,‘yy_ml+cos((15*sin(yycnt/27.66510707209673))+30)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)‘,‘yy_mt+sin((15*sin(yycnt/9.240632767417667))+30)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)‘,‘document.layers[\‘yyd1\‘]‘,2000,true,80,0,1);YY_Layerfx(0,0,‘yy_ml+cos((15*sin(yycnt/16.45318944579641))+60)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)‘,‘yy_mt+sin((15*sin(yycnt/16.0564452288292))+60)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)‘,‘document.layers[\‘yyd2\‘]‘,2000,true,80,0,1);YY_Layerfx(0,0,‘yy_ml+cos((15*sin(yycnt/6.95348954836835))+90)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)‘,‘yy_mt+sin((15*sin(yycnt/44.13697049887155))+90)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)‘,‘document.layers[\‘yyd3\‘]‘,2000,true,80,0,1);YY_Layerfx(0,0,‘yy_ml+cos((15*sin(yycnt/33.90077294583733))+120)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)‘,‘yy_mt+sin((15*sin(yycnt/2.2378828869411587))+120)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)‘,‘document.layers[\‘yyd4\‘]‘,2000,true,80,0,1);YY_Layerfx(0,0,‘yy_ml+cos((15*sin(yycnt/37.858312521039835))+150)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)‘,‘yy_mt+sin((15*sin(yycnt/18.083839795990098))+150)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)‘,‘document.layers[\‘yyd5\‘]‘,2000,true,80,0,1);</script></body>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。