码迷，mamicode.com
首页 > 编程语言 > 详细

实用的JavaScript鼠标特效

时间：2014-07-11 09:18:34      阅读：287      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   java   color   使用   

JS代码使鼠标滚轮失效

  1. 1

    当页面内容太多时，可以通过鼠标滚轮实现翻页效果。但有些读书网站提供页面自动滚屏的功能，此时可使鼠标的滚轮失效，让用户充分体验网站提供的功能。

    本例在页而中添加了一个表格，可将窗口缩小，以出现滚动条效果。当出现滚动条时．滑动鼠标的滚轮，测试此操作是否能够成功。代码重写了“document.onmousewheel”方法，若返回false值则表示不执行任何鼠标滚动的操作。

     

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

    END

JS代码实现状态栏显示鼠标位置

  1. 1

    为了让DIV层可以跟随鼠标，层的控制通常需要获取鼠标的位置。本例学习如何获取鼠标的X和Y坐标。

    本例的重点Event对象，其用来描述JavaScript的事件。Event对象的“x”属性用来获取鼠标指针位置相对于窗口客户区域的x坐标，其中客户区域不包括窗口自身的控件和滚动条。Event对象的“y”属性表示y坐标。

     

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

    END

鼠标放到图片上会显示另外一张图片

  1. 1

    在大多数网页中，如果鼠标移动到图片上，通常会给出文本提示。本例将学习如何不显示文本．而显示指定的图片。

    本例的重点是如何判断当前图片，并更改图片的地址。在img控件中，“src”属性表示要显示图片的地址，如果是网络地址，一定要指明详细的URL路径。如果判断的是当前图片，在参数传递的时候，使用“this”。

     

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

    END

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

  1. 1

     

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

    本例的重点是鼠标事件的应用。当鼠标移动到控件上时，触发了‘‘onMouseOver”事件，当鼠标移走时，触发“onMouseOut”事件。两个事件的响应都是使用“style.color”改变控件的颜色。

     

     

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

    END

禁用鼠标右键JS代码

  1. 1

     

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

    本例有两个重点：捕获窗体的鼠标事件和判断用户单击的按键。“onmousedown”事件用来捕获窗体的鼠标事件；“event.button”判断用户单击的按键，“1”表示左键，“2”表右键。

     

  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>

    END

跟随鼠标的彩色文字代码

  1. 1

    跟随鼠标的文本可以很轻松实现，本例要实现的是文字不仅要跟随鼠标，而且颜色会不断变化。

    本例的重点如下：
      （1）动态输出span元素，用来显示文本内容。动态输出span元素使用的是“document．write”方法，此处要注意每个“span”元素ID的创建方式。
      （2）获取鼠标的坐标，根据坐标位置显示文本信息。获取鼠标坐标使用的是“event．clientx”和“event．clientY”属性。
      （3）动态实现颜色的变化。本例使用了“Math．random0*255*255 * 255”创建一个随机颜色值，然后使用span元素的“color”属性设置文本最后显示的颜色。

     

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

     

    END

JS代码实现跟随鼠标的魔法文字

  1. 1

    鼠标周围可以跟随图片、文字和星星等。本例将提一些类似对联的文字，一直跟随鼠标移动。

    本例的重点是获取鼠标的活动坐标，根据坐标动态设置多个层，多个层的交替形成魔法效果。“event．x”和“event．Y”分别获取鼠标的x和y坐标，然后使用“document。onmousemove=iemouse”绑定鼠标的移动事件。

     

     
  2. 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=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+‘ >‘+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>

    END

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" >使用 IE 6.0 以上版本或以 IE 为核心的浏览器浏览本页，1024*768分辨率为佳</td></tr>
    </table>
    </BODY>
    </HTML>

实用的JavaScript鼠标特效,布布扣,bubuko.com

实用的JavaScript鼠标特效

标签：style   blog   http   java   color   使用   

原文地址：http://www.cnblogs.com/simith/p/3834631.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！