当前位置：首页 > 前端开发 > JavaScript > 正文

JS鼠标跟随特效教程

来源 : 作者 : admin 人气指数 :
评论 收藏
导语 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 <？php echo strlen($content) / 2; ?> JavaScript鼠标跟随特效使用:这个一个很简单的鼠标点击跟随案例，这个效果并没有大家想像的那么神奇，就两个属性；具体代码如下：<!DOCTYPE html PUBLIC "- W3C DTD XHTML 1 0 Transitional EN" "http
TAG:JS 鼠标 跟随 特效
本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明： 文章转载自：爱思资源网 http://www.aseoe.com/show-12-85-1.html
相关文章 热门推荐 新闻资讯 经典语录
JS常用正则表达式备忘录 谈谈你对重构的理解
一名前端工程师的自检清单 如何用JS实现“划词高亮标记”的在线笔记..
多个跨云服务器之间满带宽测速的实现方案 第三届世界互联网大会在乌镇拉开帷幕
身不由己有人怜，己不惜身无人悯。 2020年最重要的10项工作技能
Web前端专题 >> Web前端社区 >>

[前端插件推荐] 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)