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

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

WBOY
Libérer: 2016-06-21 09:42:33
original
1100 Les gens l'ont consulté

<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>
Copier après la connexion

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


回复讨论(解决方案)

求救啊!!谢谢了

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>
Copier après la connexion

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			};
Copier après la connexion

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

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal