图片跟随鼠标移动问题 - JavaScript论坛

问题点数：0 回复次数：9

图片跟随鼠标移动问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
    <title></title>
    <script type="text/javascript">
        document.onmousemove = function () {
            var x = event.clientX;
            var y = event.clientY;
            var div1 = document.getElementById("div1");
            if (!div1) {
                return;
            }
            document.getElementById("xxx").value = x;
            document.getElementById("yyy").value = y;
            //image1.style.position = "absolute";
            div1.style.top = y;  //左上角的坐标
            div1.style.left = x;
        }
    </script>
</head>
<body>
    <div id="div1" >
        <img alt="kaora" title="kaora" src="1.jpg" id="image1"  /><br />
    hello
    </div>
    <br />
    <div>
        <input type="text" id="xxx" /><br />
        <input type="text" id="yyy" />
    </div>
</body>
</html>

上面是源代码，我发现鼠标移动的时候，text标签里的值是跟着改变的，但是图片怎么也不动。。。求高手解释。。

[ 本帖最后由 zhuxuanzhu 于 2011-3-3 14:18 编辑 ]

第 2 楼

得分:0

问题在IE9上···不知道为什么，IE8包括以下的版本都可以移动图片，但是IE9只是获取了坐标值，却无法移动图片。。。。

第 3 楼

得分:0

没有IE9 无法测试

第 4 楼

得分:0

你可以给div1设置一个背景颜色或者边框看看
然后div1.style.position = "absolute";

第 5 楼

得分:0

回复 4楼 aspic

我有设定div的style.positio为absolute的，加了边框，还是没用，IE9,chrome 9都没用。。

第 6 楼

得分:0

程序代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. <title></title>
    <script type="text/javascript">
        document.onmousemove = function (evt) {
            var e = evt || window.event;
            var x = e.clientX;
            var y = e.clientY;
            var div1 = document.getElementById("div1");
            if (!div1) {
                return;
            }
            document.getElementById("xxx").value = x;
            document.getElementById("yyy").value = y;
            div1.style.position = "absolute";
            div1.style.top = y + 'px';  //左上角的坐标
            div1.style.left = x + 'px';
        }
    </script>
</head>
<body>
    <div id="div1" >
        <img alt="kaora" title="kaora" src="1.jpg" id="image1"  /><br />
    hello
    </div>
    <br />
    <div>
        <input type="text" id="xxx" /><br />
        <input type="text" id="yyy" />
    </div>
</body>
</html>