在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。
工具/原料
Dreamweaver
JS代码使鼠标滚轮失效
1、当页面内容太多时，可以通过鼠标滚轮实现翻页效果。但有些读书网站提供页面自动滚屏的功能，此时可使鼠标的滚轮失效，让用户充分体验网站提供的功能。 本例在页而中添加了一个表格，可将窗口缩小，以出现滚动条效果。当出现滚动条时．滑动鼠标的滚轮，测试此操作是否能够成功。代码重写了“document.onmousewheel”方法，若返回false值则表示不执行任何鼠标滚动的操作。
2、实例代码如下：<html xmlns="http://www.w3.org/1999/xhtml" ><head><title>JS代码使鼠标滚轮失效</title><script language="javascript">function document.onmousewheel() //滚轮事件重新定义{return false; //返回false表示什么都不操作}</script></head><body> <table style="width: 300px"> <tr> <td> 阿</td> <td> 不</td> <td> 才</td> </tr> <tr> <td> 的</td> <td> 恶</td> <td> 发</td> </tr> <tr> <td> 的</td> <td> 发</td> <td> 的</td> </tr> </table></body></html>
JS代码实现状态栏显示鼠标位置
1、为了让DIV层可以跟随鼠标，层的控制通常需要获取鼠标的位置。本例学习如何获取鼠标的X和Y坐标。 本例的重点Event对象，其用来描述JavaScript的事件。Event对象的“x”属性用来获取鼠标指针位置相对于窗口客户区域的x坐标，其中客户区域不包括窗口自身的控件和滚动条。Event对象的“y”属性表示y坐标。
2、实例代码如下： <html xmlns="http://www.w3.org/1999/xhtml" ><head><title>JS代码实现状态栏显示鼠标位置</title><script language=javascript>//移动鼠标的方法function move(e){if (document.layers) { var x=e.pageX; var y=e.pageY;}if (document.all) { var x=event.x; var y=event.y+document.body.scrollTop;}status="x:"+x+" y:"+y; //组合鼠标的x,y坐标}document.onmousemove = move; //鼠标移动时绑定move方法if (document.layers) document.captureEvents(Event.MOUSEMOVE);</script></head><body></body></html>
鼠标放到图片上会显示另外一张图片
1、在大多数网页中，如果鼠标移动到图片上，通常会给出文本提示。本例将学习如何不显示文本．而显示指定的图片。 本例的重点是如何判断当前图片，并更改图片的地址。在img控件中，“src”属性表示要显示图片的地址，如果是网络地址，一定要指明详细的URL路径。如果判断的是当前图片，在参数传递的时候，使用“this”。
2、实例代码如下： <html xmlns="http://www.w3.org/1999/xhtml" ><head><title>鼠标放到图片上会显示另外一张图片</title><SCRIPT LANGUAGE="JavaScript">function changeSrc(obj){obj.src="LOGO2.gif";//改变图像地址}</script></head><body><img onmousemove="changeSrc(this)" src="LOGO1.gif" /></body></html>
鼠标移入移出时颜色变化代码
1、 当用户将鼠标移动到按钮或链接上时．为了突出显示用户的选择，会改变链接和按钮的颜色。默认链接的颜色是自动变化的，本例学习如何手动为按钮设置这种效果。 本例的重点是鼠标事件的应用。当鼠标移动到控件上时，触发了‘'onMouseOver”事件，当鼠标移走时，触发“onMouseOut”事件。两个事件的响应都是使用“style.color”改变控件的颜色。
2、实例代码如下： <html xmlns="http://www.w3.org/1999/xhtml" ><head><title>鼠标移入移出时颜色变化代码</title></head><body><input type="submit" value="把鼠标移动这里" name="btn1" onMouseOut=this.style.color="blue" onMouseOver=this.style.color="red" ></body></html>
禁用鼠标右键JS代码
1、 为了保证网站的内容不被非法拷贝，可以通过判断鼠标按键来禁止用户操作。本例禁止用户使用鼠标右键。 本例有两个重点：捕获窗体的鼠标事件和判断用户单击的按键。“onmousedown”事件用来捕获窗体的鼠标事件；“event.button”判断用户单击的按键，“1”表示左键，“2”表右键。
2、<html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>无标题页-学无忧（www.xue51.com）</title><script language="javascript">function click() { if (event.button==2) //单击的鼠标键 { alert('本网站禁用右键'); }}document.onmousedown=click; //绑定事件</script></head><body ><div>这是一个不能使用右键的案例</div></body></html>
跟随鼠标的彩色文字代码
1、跟随鼠标的文本可以很轻松实现，本例要实现的是文字不仅要跟随鼠标，而且颜色会不断变化。 本例的重点如下： （1）动态输出span元素，用来显示文本内容。动态输出span元素使用的是“document．write”方法，此处要注意每个“span”元素ID的创建方式。 （2）获取鼠标的坐标，根据坐标位置显示文本信息。获取鼠标坐标使用的是“event．clientx”和“event．clientY”属性。 （3）动态实现颜色的变化。本例使用了“Math．random0*255*255 * 255”创建一个随机颜色值，然后使用span元素的“color”属性设置文本最后显示的颜色。
2、<html xmlns="http://www.w3.org/1999/垓矗梅吒xhtml" ><head><title>标题页-学无忧（www.xue51.com）</title><STYLE>.spanstyle {COLOR: #0066ff; FONT-FAMILY: 隶书; FONT-SIZE: 14pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible}</STYLE><SCRIPT language=javascript>var message="欢 迎 参 加 北 京 奥 运 会 ！"; //要跟随鼠标的文本var x,y;var step=15; //文本之间的距离var flag=0; message=message.split(""); //将文本切换成数组var xpos=new Array();for (i=0;i<=message.length-1;i++) { //设置所有文本的初始x坐标xpos[i]=-50;}var ypos=new Array();for (i=0;i<=message.length-1;i++) { //设置所有文本的初始Y坐标ypos[i]=-50;}function handlerXY(e) { //根据浏览器的不同，获取鼠标的x,y坐标x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX+10;y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;flag=1;}function makesnake() {if (flag==1 && document.all) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step; //设置文本之间的显示距离 ypos[i]=ypos[i-1]; //设置文本的y坐标 } xpos[0]=x+step; ypos[0]=y; for (i=0; i<=message.length-1; i++) { var thisspan = eval("span"+(i)+".style"); thisspan.posLeft=xpos[i]; thisspan.posTop=ypos[i]; thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255; }}else if (flag==1 && document.layers) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step; ypos[i]=ypos[i-1]; } xpos[0]=x+step; ypos[0]=y; for (i=0; i<message.length-1; i++) //根据字符的个数创建多个span元素，用来显示字符 { var thisspan = eval("document.span"+i); thisspan.left=xpos[i]; //指定span的x坐标 thisspan.top=ypos[i]; //指定span的y坐标 //创建随机的颜色值 thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255; }}}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 = handlerXY;function firstLoad() { //窗体一加载便触发的事件makesnake(); //实现跟随鼠标文本的方法window.setTimeout("firstLoad();", 5);//定时执行此方法}</SCRIPT></head><body bgcolor="#fef4d9" onload=javascript:firstLoad()></body></html>
JS代码实现跟随鼠标的魔法文字
1、鼠标周围可以跟随图片、文字和星星等。本例将提一些类似对联的文字，一直跟随鼠标移动。 本例的重点是获取鼠标的活动坐标，根据坐标动态设置多个层，多个层的交替形成魔法效果。“event．x”和“event．Y”分别获取鼠标的x和y坐标，然后使用“document。onmousemove=iemouse”绑定鼠标的移动事件。
2、<html xmlns="http://www.w3.org/1999/垓矗梅吒xhtml" ><head><title>标题页-学无忧（www.xue51.com）</title><SCRIPT language=JavaScript1.2>var msg='看的见我的漂移吗？';var msgColor='000000'var dismissafter=0var amount=5,ypos=0,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){ //netscape下 for (i = 0; i < amount; i++) {document.write('<layer name=ns'+i+' top=0 left=0><font face="宋体" size=2 color='+msgColor+'>'+msg+'</font></layer>')} window.captureEvents(Event.MOUSEMOVE); function nsmouse(evnt) //通过鼠标事件，获取鼠标的坐标 {xpos = evnt.pageX;ypos = evnt.pageY;mouseFollow()}}else if (document.all){ //ie下-输出层 document.write("<div id='outer' style='position:absolute;top:0px;left:0px'>"); document.write("<div id='inner' style='position:relative'>"); for (i = 0; i < amount; i++) {document.write('<div id="text"'+i+' style="position:absolute;top:0px;left:0px;font-family:Courier New;font-size:16px;color:'+msgColor+'">'+msg+'</div>')} document.write("</div>"); document.write("</div>"); function iemouse() //通过鼠标事件，获取鼠标的坐标 {ypos = document.body.scrollTop + event.y;xpos = document.body.scrollLeft + event.x;mouseFollow()}}function mouseFollow(){ if (document.layers){//netscape下-设置层的位置 document.layers["ns0"].top=ay;document.layers["ns0"].left=ax; document.layers["ns1"].top=by;document.layers["ns1"].left=bx; document.layers["ns2"].top=cy;document.layers["ns2"].left=cx; document.layers["ns3"].top=Dy;document.layers["ns3"].left=Dx; document.layers["ns4"].top=Ey;document.layers["ns4"].left=Ex; } else if (document.all){//ie下，设置层的位置 outer.all.inner.all[0].style.pixelTop=ay;outer.all.inner.all[0].style.pixelLeft=ax; outer.all.inner.all[1].style.pixelTop=by;outer.all.inner.all[1].style.pixelLeft=bx; outer.all.inner.all[2].style.pixelTop=cy;outer.all.inner.all[2].style.pixelLeft=cx; outer.all.inner.all[3].style.pixelTop=Dy;outer.all.inner.all[3].style.pixelLeft=Dx; outer.all.inner.all[4].style.pixelTop=Ey;outer.all.inner.all[4].style.pixelLeft=Ex;}}function move(){ if (dismissafter!=0) setTimeout("hideMove()",dismissafter*1000) if (document.layers){window.onMouseMove = nsmouse} else if (document.all){window.document.onmousemove = iemouse} //绑定鼠标事件 ey = Math.round(Ey+=((ypos+20)-Ey)*2/2);ex = Math.round(Ex+=((xpos+20)-Ex)*2/2); dy = Math.round(Dy+=(ey - Dy)*2/4);dx = Math.round(Dx+=(ex - Dx)*2/4); cy = Math.round(Cy+=(dy - Cy)*2/6);cx = Math.round(Cx+=(dx - Cx)*2/6); by = Math.round(By+=(cy - By)*2/8);bx = Math.round(Bx+=(cx - Bx)*2/8); ay = Math.round(Ay+= (by - Ay)*2/10);ax = Math.round(Ax+= (bx - Ax)*2/10); mouseFollow(); jumpstart=setTimeout('move()',10); //定时执行捕获操作}function hideMove(){ if (document.all){ //ie浏览器的情况下 for (i2=0;i2<amount;i2++){ outer.all.inner.all[i2].style.visibility="hidden" //设置为隐藏 clearTimeout(jumpstart) //清除定时器 } } else if (document.layers){ //netscape浏览器的情况下 for (i2=0;i2<amount;i2++){ temp="ns"+i2 document.layers[temp].visibility="hide" clearTimeout(jumpstart) } }}window.onload=move; //窗体一加载便触发飘移方法</SCRIPT></head><body></body></html>
JS实现《黑客帝国》中的字符下落效果
1、所有看过电影《黑客帝国》的人可能都对一个场非常熟悉，那就是一连串的0、l编码。本例学习如何制作那种字符下落效果。 本例的重点是对颜色和速度的随机设置。JavaScript中的“Math”对象用来提供数学运算，其中“Math random”用来获取一个0到1之问的随机数。“Math.round”是采用四舍五入方式取得最接近的整数。代码中使用了两维数组，“delete”方法用来删除数组中的元索。
2、<HTML><HEAD><TITLE>骇客犬猱勘律帝国-学无忧（www.xue51.com）</title><meta http-equiv=暧苗争死"Content-Type" content="text/html;charset=gb2312"></HEAD><style type="text/css">body{overflow:hidden;margin:0;background-color:#000000;font-family:宋体;}DIV.#heike{overflow:hidden;position:relative;top:5%;width:90%;height:90%;border-style:solid;border-width:1;border-color:#009900;}</style><script language="javascript">var strCount;var str;var Color;var Font;var sLine = "W<br>W<br>W<br>.<br>B<br>a<br>i<br>D<br>u<br>.<br>C<br>O<br>M";function OnLoad(){strCount = 40;str = [];Color = [];Font = [];Color[0] = "#002211";//文字的颜色Color[1] = "#003311";Color[2] = "#005511";Color[3] = "#008811";Color[4] = "#00BB99";Color[5] = "#114411";Color[6] = "#335566";Color[7] = "#668899";Color[8] = "#99BBAA";Color[9] = "#CECECC";Font[0] = "10px"; //文字的大小Font[1] = "12px";Font[2] = "14px";Font[3] = "16px";Font[4] = "18px";setTimeout("strik()",50);}function strik(){for(var i=0;i<strCount;i++){if(typeof(str[i]) != "undefined") //如果字符串存在{ if(str[i]["Carch"].style.pixelTop > heike.clientHeight) { str[i]["Carch"].outerHTML = ""; delete str[i]["Level"];//删除数组元素 delete str[i]["Speed"]; delete str[i]["Carch"]; delete str[i]; } else { str[i]["Carch"].style.pixelTop += str[i]["Speed"]; }}else if(Math.random()<0.25) //随机小数{ str[i] = new Array(); str[i]["Level"] = Math.round(Math.random()*4); str[i]["Speed"] = (Math.round(Math.random()*str[i]["Level"])<<2)+10; document.all["heike"].insertAdjacentHTML("AfterBegin","<span id='SPAN_"+i+"'>"+sLine+"</span>"); str[i]["Carch"] = document.all["SPAN_"+i]; str[i]["Carch"].style.fontSize = Font[str[i]["Level"]]; //字体 str[i]["Carch"].style.position = "absolute"; //位置 str[i]["Carch"].style.pixelLeft = Math.round(Math.random()*heike.clientWidth); //x坐标 str[i]["Carch"].style.pixelTop = -str[i]["Carch"].offsetHeight; //y坐标 str[i]["Carch"].style.color = Color[str[i]["Level"]+5]; //颜色 str[i]["Carch"].style.filter = "glow(Color="+Color[str[i]["Level"]]+",Strength=5)";//滤镜效果 str[i]["Carch"].style.zIndex = str[i]["Level"]; //z-Index}}setTimeout("strik()",50);}</script><BODY onload="OnLoad()"><table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" height="100%"><div id="heike"></div></td></tr><tr><td align="center" style="padding:5;font-size:9pt;color:#FFFFFF;">使用 IE 6.0 以上版本或以 IE 为核心的浏览器浏览本页，1024*768分辨率为佳</td></tr></table></BODY></HTML>
