Heim > Web-Frontend > HTML-Tutorial > 照实例做,图片仍然无法跟随鼠标移动!请教_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-21 09:42:33
Original
1101 Leute haben es durchsucht

<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>
Nach dem Login kopieren

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


回复讨论(解决方案)

求救啊!!谢谢了

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>
Nach dem Login kopieren

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			};
Nach dem Login kopieren

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage