本次小编给大家带来一个JS的效果,实现根据浏览器的窗口大小出现十字坐标并跟随鼠标移动的效果,还可以计算出实时的坐标数值。
我们先来看一下运行后的效果图:
以下是经过小编测试后的全部代码:
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0 Strict//EN//DTD”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”的在
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>鼠标跟随十字JS特效代码& lt;/title>
& lt;/head>
& lt;身体比;
& lt; div id=癶tml”祝辞& lt;/div>
& lt;脚本type=" text/javascript祝辞//var牛=document.createElement (div);
var oy=document.createElement (div);
ox.style。宽度=?00%”;
ox.style。身高=? px”;
ox.style。写成backgroundColor=# ddd的;
ox.style。位置='固定';
ox.style。左=0;
document.body.appendChild(牛);
oy.style。身高=?00%”;
oy.style。宽度=? px”;
oy.style。写成backgroundColor=# ddd的;
oy.style。位置='固定';
oy.style。顶级=0;
document.body.appendChild (oy);
文档。onmousemove=function (e) {
var e=e | |事件;
var x=e.pageX;
var y=e.pageY;
ox.style。顶级=y +“px”;
oy.style。左=x +“px”;
. getelementbyid (html)。innerHTML=' x: ' + x + ' & lt; br/祝辞y:“+ y;
}；
& lt;/script>
& lt; p>更多代码请访问:& lt; a href=" https://www.jb51.net/" target="平等"祝辞& lt;/a> & lt;/p>
& lt;/body>
& lt;/html>
大家在测试的时候可以根据需求来调整JS里的代码X表示横坐标,Y表示纵坐标。
在学习的时候如果还有任何疑问可以在下方的留言区讨论,感谢你对的支持。
