实用的JavaScript鼠标特效

前端开发 JavaScript js

创建时间:2019-08-19 08:58

字数:3.7k 阅读:

JS代码使鼠标滚轮失效
JS代码实现状态栏显示鼠标位置
鼠标放到图片上会显示另外一张图片
鼠标移入移出时颜色变化代码
禁用鼠标右键JS代码
跟随鼠标的彩色文字代码
JS代码实现跟随鼠标的魔法文字
JS实现《黑客帝国》中的字符下落效果

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坐标。

实例代码如下：

<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>

鼠标移入移出时颜色变化代码

当用户将鼠标移动到按钮或链接上时．为了突出显示用户的选择，会改变链接和按钮的颜色。默认链接的颜色是自动变化的，本例学习如何手动为按钮设置这种效果。

本例的重点是鼠标事件的应用。当鼠标移动到控件上时，触发了‘’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代码

为了保证网站的内容不被非法拷贝，可以通过判断鼠标按键来禁止用户操作。本例禁止用户使用鼠标右键。

本例有两个重点：捕获窗体的鼠标事件和判断用户单击的按键。“onmousedown”事件用来捕获窗体的鼠标事件；“event.button”判断用户单击的按键，“1”表示左键，“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．random0255255 * 255”创建一个随机颜色值，然后使用span元素的“color”属性设置文本最后显示的颜色。

<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”绑定鼠标的移动事件。

<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=0
var 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”方法用来删除数组中的元索。

<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>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以加QQ（2602138376）