您现在的位置： 365建站网 > 365文章 > jQuery/js实现跟随鼠标移动的特效代码实例

jQuery/js实现跟随鼠标移动的特效代码实例

文章来源：365jz.com     点击数：454    更新时间：2018-11-07 09:25   参与评论

js实现鼠标跟随效果

</>code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0
  10.         }
  11.         img {
  12.             position: absolute;
  13.             top: 0;
  14.             left: 0;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <img src="001.jpg" alt="" width="50" height="50" id="pic"/>
  20. <script>
  21.     var timer = null;
  22.     var pic = document.getElementById("pic");
  23.     //在页面上 点击的时候 获取鼠标在页面上的位置 让图片 慢慢 到这个位置
  24.     document.onmousemove = function (event) {
  25.         clearInterval(timer);
  26.         var event = event || window.event;
  27.         //获取鼠标在页面上的位置
  28.         var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
  29.         var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
  30.         //让图片 慢慢 到这个位置
  31.         timer = setInterval(function () {
  32.             //step = (target - leader) / 10
  33.             //leader = leader + step
  34.             var targetX = pageX - pic.offsetWidth / 2;//水平方向的目标
  35.             var targetY = pageY - pic.offsetHeight / 2;//
  36.             var leaderX = pic.offsetLeft;//水平方向的当前位置
  37.             var leaderY = pic.offsetTop;//
  38.             var stepX = (targetX - leaderX) / 10;
  39.             var stepY = (targetY - leaderY) / 10;
  40.             stepX = stepX > 0 ? Math.ceil(stepX) : Math.floor(stepX);
  41.             stepY = stepY > 0 ? Math.ceil(stepY) : Math.floor(stepY);
  42.             leaderX = leaderX + stepX;
  43.             leaderY = leaderY + stepY;
  44.             pic.style.left = leaderX + "px";//单位一定不要忘记
  45.             pic.style.top = leaderY + "px";//单位一定不要忘记
  46.             if (leaderX === targetX && leaderY === targetY) {
  47.                 clearInterval(timer);
  48.             }
  49.         }, 1);
  50.     };
  51. </script>
  52. </body>
  53. </html>

jQuery实现div跟随鼠标移动的代码


</>code
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="{utf-8}">
  5.     <title></title>
  6.     <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  7.     <style>
  8.       .aa{
  9.         height: 100px;
  10.         width: 200px;
  11.         position: absolute;
  12.         background-color: green;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <p class="aa"></p>
  18.   </body>
  19. </html>
  20. <script>
  21.   $(".aa").mousedown(function(e){
  22.     //设置移动后的默认位置
  23.     var endx=0;
  24.     var endy=0;
  25.  
  26.     //获取p的初始位置，要注意的是需要转整型，因为获取到值带px
  27.     var left= parseInt($(".aa").css("left"));
  28.     var top = parseInt($(".aa").css("top"));
  29.  
  30.     //获取鼠标按下时的坐标，区别于下面的es.pageX,es.pageY
  31.     var downx=e.pageX;
  32.     var downy=e.pageY;   //pageY的y要大写，必须大写！！
  33.  
  34.    //  鼠标按下时给p挂事件
  35.   $(".aa").bind("mousemove",function(es){
  36.  
  37.     //es.pageX,es.pageY:获取鼠标移动后的坐标
  38.     var endx= es.pageX-downx+left;   //计算p的最终位置
  39.     var endy=es.pageY-downy+top;
  40.  
  41.     //带上单位
  42.     $(".aa").css("left",endx+"px").css("top",endy+"px")  
  43.   });  
  44.  })
  45.   $(".aa").mouseup(function(){
  46.     //鼠标弹起时给p取消事件
  47.     $(".aa").unbind("mousemove")
  48.   })
  49. </script>


canvas跟随鼠标特效

</>code
  1. <style>
  2.     * {
  3. margin:0;
  4. padding:0;
  5. -webkit-box-sizing:border-box;
  6. -moz-box-sizing:border-box;
  7. -ms-box-sizing:border-box;
  8. -o-box-sizing:border-box;
  9. box-sizing:border-box;
  10. }
  11. html,body {
  12. margin:0;
  13. padding:0;
  14. font:16px/1.4 'Lato',sans-serif;
  15. color:#fefeff;
  16. -webkit-font-smoothing:antialiased;
  17. font-smoothing:antialiased;
  18. }
  19. body {
  20. background:rgb(8,5,16);
  21. -webkit-touch-callout:none;
  22. -webkit-user-select:none;
  23. -khtml-user-select:none;
  24. -moz-user-select:none;
  25. -ms-user-select:none;
  26. user-select:none;
  27. }
  28. h1 {
  29. font:2.75em 'Cinzel',serif;
  30. font-weight:400;
  31. letter-spacing:0.35em;
  32. text-shadow:0 0 25px rgba(254,254,255,0.85);
  33. }
  34. h2 {
  35. font:1.45em 'Cinzel',serif;
  36. font-weight:400;
  37. letter-spacing:0.5em;
  38. text-shadow:0 0 25px rgba(254,254,255,0.85);
  39. text-transform:lowercase;
  40. }
  41. [class^="letter"] {
  42. -webkit-transition:opacity 3s ease;
  43. -moz-transition:opacity 3s ease;
  44. transition:opacity 3s ease;
  45. }
  46. .letter-0 {
  47. transition-delay:0.2s;
  48. }
  49. .letter-1 {
  50. transition-delay:0.4s;
  51. }
  52. .letter-2 {
  53. transition-delay:0.6s;
  54. }
  55. .letter-3 {
  56. transition-delay:0.8s;
  57. }
  58. .letter-4 {
  59. transition-delay:1.0s;
  60. }
  61. .letter-5 {
  62. transition-delay:1.2s;
  63. }
  64. .letter-6 {
  65. transition-delay:1.4s;
  66. }
  67. .letter-7 {
  68. transition-delay:1.6s;
  69. }
  70. .letter-8 {
  71. transition-delay:1.8s;
  72. }
  73. .letter-9 {
  74. transition-delay:2.0s;
  75. }
  76. .letter-10 {
  77. transition-delay:2.2s;
  78. }
  79. .letter-11 {
  80. transition-delay:2.4s;
  81. }
  82. .letter-12 {
  83. transition-delay:2.6s;
  84. }
  85. .letter-13 {
  86. transition-delay:2.8s;
  87. }
  88. .letter-14 {
  89. transition-delay:3.0s;
  90. }
  91. h1,h2 {
  92. visibility:hidden;
  93. -webkit-transform:translate3d(0,0,0);
  94. -moz-transform:translate3d(0,0,0);
  95. transform:translate3d(0,0,0);
  96. }
  97. h1.transition-in,h2.transition-in {
  98. visibility:visible;
  99. }
  100. h1 [class^="letter"],h2 [class^="letter"] {
  101. opacity:0;
  102. }
  103. h1.transition-in [class^="letter"],h2.transition-in [class^="letter"] {
  104. opacity:1;
  105. }
  106. #container {
  107. display:table;
  108. position:absolute;
  109. z-index:20;
  110. width:100%;
  111. height:100%;
  112. text-align:center;
  113. cursor:none;
  114. }
  115. #container > div {
  116. display:table-cell;
  117. vertical-align:middle;
  118. }
  119. #container p {
  120. position:absolute;
  121. width:100%;
  122. left:0;
  123. bottom:25px;
  124. font-size:0.8em;
  125. letter-spacing:0.1em;
  126. font-weight:300;
  127. color:#76747a;
  128. -webkit-font-smoothing:subpixel-antialiased;
  129. font-smoothing:subpixel-antialiased;
  130. }
  131. #container p strong {
  132. color:#b3abc5;
  133. }
  134. #container p span {
  135. font-size:0.75em;
  136. padding:0 2px;
  137. }
  138. #canvas {
  139. position:absolute;
  140. z-index:10;
  141. top:0;
  142. left:0;
  143. width:100%;
  144. height:100%;
  145. cursor:none;
  146. }
  147. #stats {
  148. position:absolute;
  149. z-index:10;
  150. left:10px;
  151. top:10px;
  152. }
  153. .dg.ac {
  154. z-index:100 !important;
  155. }
  156. </style>
  157.  <div id="container">
  158.         <div>
  159.              <h1 id="h1">
  160.                 365建站！ </h1>
  161.             <h2 id="h2">让建站和seo变得简单</h2>
  162.         </div>
  163. </div>
  164. <canvas id="canvas"></canvas>
  165. <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  166. <script>
  167.     var Stats = function() {
  168.     var e = Date.now(),
  169.         t = e,
  170.         i = 0,
  171.         n = 1 / 0,
  172.         r = 0,
  173.         s = 0,
  174.         o = 1 / 0,
  175.         a = 0,
  176.         l = 0,
  177.         h = 0,
  178.         c = document.createElement("div");
  179.     c.id = "stats", c.addEventListener("mousedown", function(e) {
  180.         e.preventDefault(), v(++h % 2)
  181.     }, !1), c.style.cssText = "width:80px;opacity:0.9;cursor:pointer";
  182.     var u = document.createElement("div");
  183.     u.id = "fps", u.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#002", c.appendChild(u);
  184.     var d = document.createElement("div");
  185.     d.id = "fpsText", d.style.cssText = "color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px", d.innerHTML = "FPS", u.appendChild(d);
  186.     var p = document.createElement("div");
  187.     for (p.id = "fpsGraph", p.style.cssText = "position:relative;width:74px;height:30px;background-color:#0ff", u.appendChild(p); 74 > p.children.length;) {
  188.         var f = document.createElement("span");
  189.         f.style.cssText = "width:1px;height:30px;float:left;background-color:#113", p.appendChild(f)
  190.     }
  191.     var m = document.createElement("div");
  192.     m.id = "ms", m.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#020;display:none", c.appendChild(m);
  193.     var g = document.createElement("div");
  194.     g.id = "msText", g.style.cssText = "color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px", g.innerHTML = "MS", m.appendChild(g);
  195.     var y = document.createElement("div");
  196.     for (y.id = "msGraph", y.style.cssText = "position:relative;width:74px;height:30px;background-color:#0f0", m.appendChild(y); 74 > y.children.length;) {
  197.         var f = document.createElement("span");
  198.         f.style.cssText = "width:1px;height:30px;float:left;background-color:#131", y.appendChild(f)
  199.     }
  200.     var v = function(e) {
  201.             switch (h = e) {
  202.                 case 0:
  203.                     u.style.display = "block", m.style.display = "none";
  204.                     break;
  205.                 case 1:
  206.                     u.style.display = "none", m.style.display = "block"
  207.             }
  208.         },
  209.         b = function(e, t) {
  210.             var i = e.appendChild(e.firstChild);
  211.             i.style.height = t + "px"
  212.         };
  213.     return {
  214.         REVISION: 11,
  215.         domElement: c,
  216.         setMode: v,
  217.         begin: function() {
  218.             e = Date.now()
  219.         },
  220.         end: function() {
  221.             var h = Date.now();
  222.             return i = h - e, n = Math.min(n, i), r = Math.max(r, i), g.textContent = i + " MS (" + n + "-" + r + ")", b(y, Math.min(30, 30 - 30 * (i / 200))), l++, h > t + 1e3 && (s = Math.round(1e3 * l / (h - t)), o = Math.min(o, s), a = Math.max(a, s), d.textContent = s + " FPS (" + o + "-" + a + ")", b(p, Math.min(30, 30 - 30 * (s / 100))), t = h, l = 0), h
  223.         },
  224.         update: function() {
  225.             e = this.end()
  226.         }
  227.     }
  228. };
  229. ;
  230. (function(window) {
  231.     var ctx,
  232.         hue,
  233.         logo,
  234.         form,
  235.         buffer,
  236.         target = {},
  237.         tendrils = [],
  238.         settings = {};
  239.     settings.debug = true;
  240.     settings.friction = 0.5;
  241.     settings.trails = 20;
  242.     settings.size = 50;
  243.     settings.dampening = 0.25;
  244.     settings.tension = 0.98;
  245.     Math.TWO_PI = Math.PI * 2;
  246.     // ========================================================================================
  247.     // Oscillator
  248.     // ----------------------------------------------------------------------------------------
  249.     function Oscillator(options) {
  250.         this.init(options || {});
  251.     }
  252.     Oscillator.prototype = (function() {
  253.         var value = 0;
  254.         return {
  255.             init: function(options) {
  256.                 this.phase = options.phase || 0;
  257.                 this.offset = options.offset || 0;
  258.                 this.frequency = options.frequency || 0.001;
  259.                 this.amplitude = options.amplitude || 1;
  260.             },
  261.             update: function() {
  262.                 this.phase += this.frequency;
  263.                 value = this.offset + Math.sin(this.phase) * this.amplitude;
  264.                 return value;
  265.             },
  266.             value: function() {
  267.                 return value;
  268.             }
  269.         };
  270.     })();
  271.     // ========================================================================================
  272.     // Tendril
  273.     // ----------------------------------------------------------------------------------------
  274.     function Tendril(options) {
  275.         this.init(options || {});
  276.     }
  277.     Tendril.prototype = (function() {
  278.         function Node() {
  279.             this.x = 0;
  280.             this.y = 0;
  281.             this.vy = 0;
  282.             this.vx = 0;
  283.         }
  284.         return {
  285.             init: function(options) {
  286.                 this.spring = options.spring + (Math.random() * 0.1) - 0.05;
  287.                 this.friction = settings.friction + (Math.random() * 0.01) - 0.005;
  288.                 this.nodes = [];
  289.                 for (var i = 0, node; i < settings.size; i++) {
  290.                     node = new Node();
  291.                     node.x = target.x;
  292.                     node.y = target.y;
  293.                     this.nodes.push(node);
  294.                 }
  295.             },
  296.             update: function() {
  297.                 var spring = this.spring,
  298.                     node = this.nodes[0];
  299.                 node.vx += (target.x - node.x) * spring;
  300.                 node.vy += (target.y - node.y) * spring;
  301.                 for (var prev, i = 0, n = this.nodes.length; i < n; i++) {
  302.                     node = this.nodes[i];
  303.                     if (i > 0) {
  304.                         prev = this.nodes[i - 1];
  305.                         node.vx += (prev.x - node.x) * spring;
  306.                         node.vy += (prev.y - node.y) * spring;
  307.                         node.vx += prev.vx * settings.dampening;
  308.                         node.vy += prev.vy * settings.dampening;
  309.                     }
  310.                     node.vx *= this.friction;
  311.                     node.vy *= this.friction;
  312.                     node.x += node.vx;
  313.                     node.y += node.vy;
  314.                     spring *= settings.tension;
  315.                 }
  316.             },
  317.             draw: function() {
  318.                 var x = this.nodes[0].x,
  319.                     y = this.nodes[0].y,
  320.                     a, b;
  321.                 ctx.beginPath();
  322.                 ctx.moveTo(x, y);
  323.                 for (var i = 1, n = this.nodes.length - 2; i < n; i++) {
  324.                     a = this.nodes[i];
  325.                     b = this.nodes[i + 1];
  326.                     x = (a.x + b.x) * 0.5;
  327.                     y = (a.y + b.y) * 0.5;
  328.                     ctx.quadraticCurveTo(a.x, a.y, x, y);
  329.                 }
  330.                 a = this.nodes[i];
  331.                 b = this.nodes[i + 1];
  332.                 ctx.quadraticCurveTo(a.x, a.y, b.x, b.y);
  333.                 ctx.stroke();
  334.                 ctx.closePath();
  335.             }
  336.         };
  337.     })();
  338.     // ----------------------------------------------------------------------------------------
  339.     function init(event) {
  340.         document.removeEventListener('mousemove', init);
  341.         document.removeEventListener('touchstart', init);
  342.         document.addEventListener('mousemove', mousemove);
  343.         document.addEventListener('touchmove', mousemove);
  344.         document.addEventListener('touchstart', touchstart);
  345.         mousemove(event);
  346.         reset();
  347.         loop();
  348.     }
  349.     function reset() {
  350.         tendrils = [];
  351.         for (var i = 0; i < settings.trails; i++) {
  352.             tendrils.push(new Tendril({
  353.                 spring: 0.45 + 0.025 * (i / settings.trails)
  354.             }));
  355.         }
  356.     }
  357.     function loop() {
  358.         if (!ctx.running) return;
  359.         ctx.globalCompositeOperation = 'source-over';
  360.         ctx.fillStyle = 'rgba(8,5,16,0.4)';
  361.         ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  362.         ctx.globalCompositeOperation = 'lighter';
  363.         ctx.strokeStyle = 'hsla(' + Math.round(hue.update()) + ',90%,50%,0.25)';
  364.         ctx.lineWidth = 1;
  365.         if (ctx.frame % 60 == 0) {
  366.             console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude);
  367.         }
  368.         for (var i = 0, tendril; i < settings.trails; i++) {
  369.             tendril = tendrils[i];
  370.             tendril.update();
  371.             tendril.draw();
  372.         }
  373.         ctx.frame++;
  374.         ctx.stats.update();
  375.         requestAnimFrame(loop);
  376.     }
  377.     function resize() {
  378.         ctx.canvas.width = window.innerWidth;
  379.         ctx.canvas.height = window.innerHeight;
  380.     }
  381.     function start() {
  382.         if (!ctx.running) {
  383.             ctx.running = true;
  384.             loop();
  385.         }
  386.     }
  387.     function stop() {
  388.         ctx.running = false;
  389.     }
  390.     function mousemove(event) {
  391.         if (event.touches) {
  392.             target.x = event.touches[0].pageX;
  393.             target.y = event.touches[0].pageY;
  394.         } else {
  395.             target.x = event.clientX
  396.             target.y = event.clientY;
  397.         }
  398.         event.preventDefault();
  399.     }
  400.     function touchstart(event) {
  401.         if (event.touches.length == 1) {
  402.             target.x = event.touches[0].pageX;
  403.             target.y = event.touches[0].pageY;
  404.         }
  405.     }
  406.     function keyup(event) {
  407.         switch (event.keyCode) {
  408.             case 32:
  409.                 save();
  410.                 break;
  411.             default:
  412.                 // console.log(event.keyCode);
  413.         }
  414.     }
  415.     function letters(id) {
  416.         var el = document.getElementById(id),
  417.             letters = el.innerHTML.replace('&', '&').split(''),
  418.             heading = '';
  419.         for (var i = 0, n = letters.length, letter; i < n; i++) {
  420.             letter = letters[i].replace('&', '&');
  421.             heading += letter.trim() ? '<span class="letter-' + i + '">' + letter + '</span>' : ' ';
  422.         }
  423.         el.innerHTML = heading;
  424.         setTimeout(function() {
  425.             el.className = 'transition-in';
  426.         }, (Math.random() * 500) + 500);
  427.     }
  428.     function save() {
  429.         if (!buffer) {
  430.             buffer = document.createElement('canvas');
  431.             buffer.width = screen.availWidth;
  432.             buffer.height = screen.availHeight;
  433.             buffer.ctx = buffer.getContext('2d');
  434.             form = document.createElement('form');
  435.             form.method = 'post';
  436.             form.input = document.createElement('input');
  437.             form.input.type = 'hidden';
  438.             form.input.name = 'data';
  439.             form.appendChild(form.input);
  440.             document.body.appendChild(form);
  441.         }
  442.         buffer.ctx.fillStyle = 'rgba(8,5,16)';
  443.         buffer.ctx.fillRect(0, 0, buffer.width, buffer.height);
  444.         buffer.ctx.drawImage(canvas,
  445.             Math.round(buffer.width / 2 - canvas.width / 2),
  446.             Math.round(buffer.height / 2 - canvas.height / 2)
  447.         );
  448.         buffer.ctx.drawImage(logo,
  449.             Math.round(buffer.width / 2 - logo.width / 4),
  450.             Math.round(buffer.height / 2 - logo.height / 4),
  451.             logo.width / 2,
  452.             logo.height / 2
  453.         );
  454.         window.open(buffer.toDataURL(), 'wallpaper', 'top=0,left=0,width=' + buffer.width + ',height=' + buffer.height);
  455.         // form.input.value = buffer.toDataURL().substr(22);
  456.         // form.submit();
  457.     }
  458.     window.requestAnimFrame = (function() {
  459.         return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(fn) {
  460.             window.setTimeout(fn, 1000 / 60)
  461.         };
  462.     })();
  463.     window.onload = function() {
  464.         ctx = document.getElementById('canvas').getContext('2d');
  465.         ctx.stats = new Stats();
  466.         ctx.running = true;
  467.         ctx.frame = 1;
  468.         logo = new Image();
  469.         logo.src = 'http://labs.nikrowell.com/lightsandmotion/ultraviolet/images/logo.png';
  470.         hue = new Oscillator({
  471.             phase: Math.random() * Math.TWO_PI,
  472.             amplitude: 85,
  473.             frequency: 0.0015,
  474.             offset: 285
  475.         });
  476.         letters('h1');
  477.         letters('h2');
  478.         document.addEventListener('mousemove', init);
  479.         document.addEventListener('touchstart', init);
  480.         document.body.addEventListener('orientationchange', resize);
  481.         window.addEventListener('resize', resize);
  482.         window.addEventListener('keyup', keyup);
  483.         window.addEventListener('focus', start);
  484.         window.addEventListener('blur', stop);
  485.         resize();
  486.         if (window.DEBUG) {
  487.             var gui = new dat.GUI();
  488.             // gui.add(settings, 'debug');
  489.             settings.gui.add(settings, 'trails', 1, 30).onChange(reset);
  490.             settings.gui.add(settings, 'size', 25, 75).onFinishChange(reset);
  491.             settings.gui.add(settings, 'friction', 0.45, 0.55).onFinishChange(reset);
  492.             settings.gui.add(settings, 'dampening', 0.01, 0.4).onFinishChange(reset);
  493.             settings.gui.add(settings, 'tension', 0.95, 0.999).onFinishChange(reset);
  494.             document.body.appendChild(ctx.stats.domElement);
  495.         }
  496.     };
  497. })(window);
  498. </script>



如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (454人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号