照实例做，图片仍然无法跟随鼠标移动！请教_html/css

照实例做，图片仍然无法跟随鼠标移动！请教_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:42:33

原创

1107人浏览过

<head>    <title></title>    <script type="text/javascript">        document.onmousemove = function () {            var x = window.event.clientX;            var y = window.event.clientY;            var div1 = document.getElementById("div1");            if (!div1) {                return;            }            div1.style.left = x;            div1.style.top = y;        };    </script></head><body><div id="div1" style="position:absolute">@@##@@<br />我是图片。</div></body>

登录后复制

目的是要实现图片跟随鼠标移动，执行的时候鼠标稍微能往左边和上面动一下，然后就不动了，请教各位问题出在哪里了？？谢谢

回复讨论(解决方案)

求救啊！！谢谢了

chrome下你的代码成立，firefox下提示找不到windows.event
修改一下,在firefox和IE6下也可以使用。

<head>    <title></title>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <script type="text/javascript">        document.onmousemove = function (event) {			event= event|| window.event            var x = event.clientX;            var y = event.clientY;            var div1 = document.getElementById("div1");            if (!div1) {                return;            }            div1.style.left = x;            div1.style.top = y;        };    </script></head><body><div id="div1" style="position:absolute">@@##@@<br />我是图片。</div> </body>

登录后复制

chrome下你的代码成立，firefox下提示找不到windows.event
修改一下,在firefox和IE6下也可以使用。

JavaScript code?123456789101112131415161718192021222324

效果还是一样的，图片在原始位置能朝左边和上面移动一点点，然后就不能动了，达不到我的效果，我是IE9！！

mootools的兼容性代码，你试试

this.client = {				x: (event.pageX != null) ? event.pageX - win.pageXOffset : event.clientX,				y: (event.pageY != null) ? event.pageY - win.pageYOffset : event.clientY			};

登录后复制

嗯，win=window;

mootools的兼容性代码，你试试
JavaScript code?1234this.client = { x: (event.pageX != null) ? event.pageX - win.pageXOffset : event.clientX, y: (event.pageY != null) ? ……
你好这段代码不知道用到哪里？请指教下。谢谢了！！

我的IE9崩了懒得重装，你试试吧。