search

Home >Web Front-end >HTML Tutorial >照实例做，图片仍然无法跟随鼠标移动！请教_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-21 09:42:331105browse

<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"><img  src="img\fly.png" / alt="照实例做，图片仍然无法跟随鼠标移动！请教_html/css_WEB-ITnose" ><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="max-width:90%"><img  src="img\fly.png" / alt="照实例做，图片仍然无法跟随鼠标移动！请教_html/css_WEB-ITnose" ><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崩了懒得重装，你试试吧。


    
    
    <script> <br /> document.onmousemove = function (event) { <br /> event= event|| window.event <br /> var x = (event.pageX != null) ? event.pageX - window.pageXOffset : event.clientX; <br /> var y = (event.pageY != null) ? event.pageY - window.pageYOffset : event.clientY; <br /> var div1 = document.getElementById("div1"); <br /> if (!div1) { <br /> return; <br /> } <br /> div1.style.left = x; <br /> div1.style.top = y; <br /> }; <br /> </script>



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

我是图片。

  

其实也不是你这样解决的！不知道为什么,IE9开启兼容模式问题就解决了！如果用你这段代码也是同样问题！

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：请教：网站的这种样式怎么写出来的_html/css_WEB-ITnoseNext article：jquery+div如何实现frameset效果？_html/css_WEB-ITnose

Related articles

See more