JS鼠标跟随特效教程

导语 JavaScript鼠标跟随特效使用:这个一个很简单的鼠标点击跟随案例,这个效果并没有大家想像的那么神奇,就两个属性;具体代码如下:<!DOCTYPE html PUBLIC "- W3C DTD XHTML 1 0 Transitional EN" "http

JavaScript鼠标跟随特效使用:
这个一个很简单的鼠标点击跟随案例,这个效果并没有大家想像的那么神奇,就两个属性;
具体代码如下:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <style>
  5. div {width:30px; height:30px; background:yellow;}
  6. #test {z-index:100; width:20px; height:20px;left:150px; top:150px; background:red; position:absolute;}
  7. </style>
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. <title>鼠标点击跟随的Div效果</title>
  10. <script>
  11. window.onload=function ()
  12. {
  13.    document.getElementById('test').onclick=function (ev)
  14.         {
  15.              //console.log(ev);   //查看鼠标点击的信息 (如何时点击、点击的位置等)
  16.                 var test = document.getElementById('test');
  17.                 test.style.left = ev.clientX+'px';
  18.                 test.style.top = ev.clientY+'px';
  19.         };
  20. }
  21. </script>
  22. </head>
  23. <body>
  24. <div id="test"></div>
  25.  
  26. </body>
  27. </html>
复制代码


   这是一个鼠标移动跟随特效,基本效果已经做出来,还不是很完善,有兴趣的可以继续优化下;

css样式:
  1. <style>
  2. div {width:10px; height:10px; background:red; position:absolute;}
  3. </style>
复制代码
js代码:
  1. <script>
  2. window.onload=function ()
  3. {
  4.         var aDiv=document.getElementsByTagName('div');
  5.         var i=0;
  6.         
  7.         setInterval(function(){
  8.                 for(i=aDiv.length-1;i>0;i--)
  9.                 {
  10.                         aDiv[i].style.left=aDiv[i-1].style.left;
  11.                         aDiv[i].style.top=aDiv[i-1].style.top;
  12.                 }
  13.         
  14.                 },5);
  15.         document.onmousemove=function (ev)
  16.         {
  17.                 var oEvent=ev||event;
  18.                 aDiv[0].style.left=oEvent.clientX+'px';
  19.                 aDiv[0].style.top=oEvent.clientY+'px';
  20.         };
  21. };
  22. </script>
复制代码
全部代码:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <style>
  5. div {width:10px; height:10px; background:red; position:absolute;}
  6. </style>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <title>跟随鼠标的Div效果</title>
  9. <script>
  10. window.onload=function ()
  11. {
  12.         var aDiv=document.getElementsByTagName('div');
  13.         var i=0;
  14.         
  15.         setInterval(function(){
  16.                 for(i=aDiv.length-1;i>0;i--)
  17.                 {
  18.                         aDiv[i].style.left=aDiv[i-1].style.left;
  19.                         aDiv[i].style.top=aDiv[i-1].style.top;
  20.                 }
  21.         
  22.                 },5);
  23.         document.onmousemove=function (ev)
  24.         {
  25.                 var oEvent=ev||event;
  26.                 aDiv[0].style.left=oEvent.clientX+'px';
  27.                 aDiv[0].style.top=oEvent.clientY+'px';
  28.         };
  29. };
  30. </script>
  31. </head>
  32. <body>
  33. <div></div>
  34. <div></div>
  35. <div></div>
  36. <div></div>
  37. <div></div>
  38. <div></div>
  39. <div></div>
  40. <div></div>
  41. <div></div>
  42. <div></div>
  43. <div></div>
  44. <div></div>
  45. <div></div>
  46. <div></div>
  47. <div></div>
  48. <div></div>
  49. <div></div>
  50. <div></div>
  51. <div></div>
  52. <div></div>
  53. <div></div>
  54. <div></div>
  55. <div></div>
  56. <div></div>
  57. <div></div>
  58. <div></div>
  59. <div></div>
  60. <div></div>
  61. <div></div>
  62. <div></div>
  63. <div></div>
  64.  
  65. </body>
  66. </html>
复制代码

http://www.aseoe.com/ true JS鼠标跟随特效教程 http://www.aseoe.com/show-12-85-1.html report 20388.5 JavaScript鼠标跟随特效使用:这个一个很简单的鼠标点击跟随案例,这个效果并没有大家想像的那么神奇,就两个属性;具体代码如下:<!DOCTYPE html PUBLIC "- W3C DTD XHTML 1 0 Transitional EN" "http
TAG:JS 鼠标 跟随 特效
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-12-85-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)