您好,登錄后才能下訂單哦!
本次小編給大家?guī)硪粋€JS的效果,實現根據瀏覽器的窗口大小出現十字坐標并跟隨鼠標移動的效果,還可以計算出實時的坐標數值。
我們先來看一下運行后的效果圖:
以下是經過小編測試后的全部代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠標跟隨十字JS特效代碼</title> </head> <body > <div id="html"></div> <script type="text/javascript"> // var ox = document.createElement('div'); var oy = document.createElement('div'); ox.style.width = '100%'; ox.style.height = '1px'; ox.style.backgroundColor = '#ddd'; ox.style.position = 'fixed'; ox.style.left = 0; document.body.appendChild(ox); oy.style.height = '100%'; oy.style.width = '1px'; oy.style.backgroundColor = '#ddd'; oy.style.position = 'fixed'; 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 + 'px'; oy.style.left = x + 'px'; document.getElementById('html'). innerHTML = 'x : ' + x + '<br/>y : ' + y; }; </script> <p>更多代碼請訪問:<a target="_blank">億速云</a></p> </body> </html>
大家在測試的時候可以根據需求來調整JS里的代碼X表示橫坐標,Y表示縱坐標。
在學習的時候如果還有任何疑問可以在下方的留言區(qū)討論,感謝你對億速云的支持。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。