日期:2014-05-16  浏览次数:20471 次

关于头HTML文件的问题~~!!!!
HTML code

<!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>
    
</head>
<body>
<script type="text/javascript">
    document.onmousemove = function () {
        var fly = document.getElementById("fly");
        var x = window.event.clientX;
        var y = window.event.clientY;
        if (!fly) {
            return;
        }
        fly.style.left = x;
        fly.style.top = y;
    };
    </script>

<div id="fly" style="position:absolute">
    <img src="sun_wk.gif" /><br />

</div>

</body>
</html>


上面的代码为什么不行。要实现的效果是,图片跟着鼠标移动。。。
但去掉<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">就好了,为什么????

------解决方案--------------------
试了下,IE8下不去掉这一段也实现了图片跟着鼠标移动的效果。
不知楼主用的IE几?
------解决方案--------------------
<script type="text/javascript">
function a(e){
var a=e||window.event;
var img=document.getElementById("test");
img.style.left=a.clientX+"px";
img.style.top=a.clientY+"px";
}
document.onmousemove=a;
</script>
<body>
<div id="test" style="position:absolute">
<img src="1.jpg" />
</div>
楼主大概用的不是ie吧?
------解决方案--------------------
HTML code

<!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 (e) {
        e = window.event || e;
        var fly = document.getElementById("fly");
        var x = e.clientX;
        var y = e.clientY;
        if (!fly) {
            return;
        }
        fly.style.left = x + 'px';
        fly.style.top = y + 'px';
    };
    </script>  
</head>
<body>


<div id="fly" style="position:absolute">
    <img src="http://avatar.profile.csdn.net/A/E/C/2_chang890112.jpg" /><br />

</div>

</body>
</html>