javascript的dom应用——鼠标移动事件

楼主最近在学习js，遇到一个问题，望各位高手解决，我想实现的是图片随着鼠标的移动在网页上移动的动态效果，可是最后的结果就是不会动，图片出现在页面的左上角。代码是：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>我是一个小仙女</title>
    <script type="text/javascript">
        document.onmousemove = function () {
            var x = window.event.clientX;
            var y = window.event.clientY;
            var divFly = document.getElementById("divFly");
            if (!divFly) {
                return;
            }
            divFly.style.left = x;
            divFly.style.top = y;
        };
    </script>
</head>
<body>
    <div id="divFly" style="position:absolute">
<!--        <img src="pic/DSCN4044.png" width="30px" height="30px" alt="头哥"/><br />-->
        我是一个小仙女，咿呀咿呀哟……
    </div>
</body>
</html>
在这里我注释掉了图片
大家帮帮忙吧，我用的是vs2010写的，在ie9下测试。

解决方案 »

  1.   

    今天刚改了一个鼠标移动层的js代码，你可以借鉴一下！
    html代码
    <div id="div" onMouseDown="ObjMove(this)" style="display:none; cursor:move; position:absolute; left:20px; top:20px; width:100px;background-color:#ccc;"></div>js代码function ObjMove(obj){ 
    var iWidth = document.documentElement.clientWidth;  
    var iHeight = document.documentElement.clientHeight;   
    var w=obj.offsetWidth;//获取对话框宽度
    var h=obj.offsetHeight;//获取对话框高度
    var moveX = 0; 
    var moveY = 0; 
    var moveTop = 0; 
    var moveLeft = 0; 
    var moveable = false; 
    var docMouseMoveEvent = document.onmousemove; 
    var docMouseUpEvent = document.onmouseup;     
    var evt = getEvent(); 
    moveable = true;  
    moveX = evt.clientX; 
    moveY = evt.clientY; 
    moveTop = parseInt(obj.style.top); 
    moveLeft = parseInt(obj.style.left);     
    document.onmousemove = function(){ 
    if (moveable){ 
    var evt = getEvent(); 
    var x = moveLeft + evt.clientX - moveX; 
    var y = moveTop + evt.clientY - moveY; 
    if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ){ 
    obj.style.left = x + "px"; 
    obj.style.top = y + "px";
    } 
    }     
    document.onmouseup = function(){  
    if (moveable) {  
    document.onmousemove = docMouseMoveEvent; 
    document.onmouseup = docMouseUpEvent; 
    moveable = false;  
    moveX = 0; 
    moveY = 0; 
    moveTop = 0; 
    moveLeft = 0; 
    }  
    }; 
    } 
    // 获得事件Event对象，用于兼容IE和FireFox 
    function getEvent() { 
    return window.event || arguments.callee.caller.arguments[0]; 
    }
    }
      

  2.   

    html代码
    <div id="div" onMouseDown="ObjMove(this)" style="cursor:move; position:absolute; left:20px; top:20px; width:100px;background-color:#ccc;"></div>上面的写错了，请改正一下！
      

  3.   

    多谢楼上，我看了你的代码，把divFly.style.left = x;
                divFly.style.top = y;这两句改成divFly.style.left = x+"px";
                divFly.style.top = y+"px";，就可以了。谢谢你的启发！