JS實作滑鼠跟隨特效

這次帶給大家JS實作滑鼠跟隨特效，JS實作滑鼠跟隨特效的注意事項有哪些，以下是實戰案例，一起來看一下。

以下是經過小編測試後的全部程式碼：

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<meta>
<title>鼠标跟随十字JS特效代码</title>


 <p></p>
 <script>
 //
 var ox = document.createElement(&#39;p&#39;);
 var oy = document.createElement(&#39;p&#39;);
 ox.style.width = &#39;100%&#39;;
 ox.style.height = &#39;1px&#39;;
 ox.style.backgroundColor = &#39;#ddd&#39;;
 ox.style.position = &#39;fixed&#39;;
 ox.style.left = 0;
 document.body.appendChild(ox);
 oy.style.height = &#39;100%&#39;;
 oy.style.width = &#39;1px&#39;;
 oy.style.backgroundColor = &#39;#ddd&#39;;
 oy.style.position = &#39;fixed&#39;;
 oy.style.top = 0;
 document.body.appendChild(oy);
 document.onmousemove = function(e){
 var e = e || event;
 var x = e.pageX;
 var y = e.pageY;
 ox.style.top = y + &#39;px&#39;;
 oy.style.left = x + &#39;px&#39;;
 document.getElementById(&#39;html&#39;). innerHTML = &#39;x : &#39; + x + &#39;<br/>y : &#39; + y;
 };
 </script>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Webpack如何建構Electron應用

#Spring生命週期和容器擴充使用詳解

以上是JS實作滑鼠跟隨特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！