本次小編給大家?guī)硪粋€(gè)JS的效果，實(shí)現(xiàn)根據(jù)瀏覽器的窗口大小出現(xiàn)十字坐標(biāo)并跟隨鼠標(biāo)移動(dòng)的效果，還可以計(jì)算出實(shí)時(shí)的坐標(biāo)數(shù)值。
我們先來看一下運(yùn)行后的效果圖：
以下是經(jīng)過小編測(cè)試后的全部代碼：
<!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>鼠標(biāo)跟隨十字JS特效代碼</title></head><body style="margin: 0;"> <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>更多代碼請(qǐng)?jiān)L問：<a href="http://m.survivalescaperooms.com/" target="_blank">武林網(wǎng)</a></p></body></html>大家在測(cè)試的時(shí)候可以根據(jù)需求來調(diào)整JS里的代碼X表示橫坐標(biāo)，Y表示縱坐標(biāo)。
在學(xué)習(xí)的時(shí)候如果還有任何疑問可以在下方的留言區(qū)討論，感謝你對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
