JS实现十字坐标跟随鼠标效果

本次小编给大家带来一个射流研究…的效果，实现根据浏览器的窗口大小出现十字坐标并跟随鼠标移动的效果，还可以计算出实时的坐标数值。

我们先来看一下运行后的效果图：

以下是经过小编测试后的全部代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-严格。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title鼠标跟随十字射流研究…特效代码/title/head body style=' margin :0 'div id='html'/div脚本类型=' text/JavaScript '/var ox=document。创建元素(' div ')；var oy=文档。创建元素(' div ')；公牛。风格。宽度=' 100% '；公牛。风格。高度=' 1px公牛。风格。background COlOr=" # DDD "；' ox.style.position='固定；公牛。风格。left=0；文件。尸体。阑尾(牛)；哦。风格。高度=' 100% '；哦。风格。宽度=' 1px哦。风格。background COlOr=" # DDD "；哦。风格。位置='固定'；哦。风格。top=0；文件。尸体。阑尾(oy );文件。onmousemove=function(e){ var e=e | | event；var x=e.pageXvar y=e.pageYox。风格。top=y ' px哦。风格。left=x ' pxdocument.getElementById('html ').innerHTML=' x : ' x ' br/y : ' y；};/scriptp更多代码请访问：a href='//www .JB 51。net/' target=' _ blank '我们/a/p/body/html大家在测试的时候可以根据需求来调整射流研究…里的代码X表示横坐标，Y表示纵坐标。

在学习的时候如果还有任何疑问可以在下方的留言区讨论，感谢你对我们的支持。