cari

Rumah >hujung hadapan web >html tutorial >照实例做，图片仍然无法跟随鼠标移动！请教_html/css_WEB-ITnose

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

WBOY
WBOYasal
2016-06-21 09:42:331105semak imbas

<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开启兼容模式问题就解决了！如果用你这段代码也是同样问题！

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：请教：网站的这种样式怎么写出来的_html/css_WEB-ITnoseArtikel seterusnya：jquery+div如何实现frameset效果？_html/css_WEB-ITnose

Artikel berkaitan

Lihat lagi