js图片跟随鼠标移动代码_js图片跟随源代码-CSDN博客

js图片跟随鼠标移动代码
火狐兼容性不太好

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html id="Main"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>类似QQ等级</title> 

</head> 
<body > 
<img src="images/113.gif" id="Img"/>
 
<style>
#Img{ position:absolute; top:0px; right:0px;}
/*#Main{ background-color:#F60; width:px; height:px;}*/
</style>
<script>
window.onload=Main;
//全局坐标变量
 var x="";
 var y="";
 //定位图片位置
 function GetMouse(oEvent)
 {
   x=window.event.clientX;
   y=oEvent.clientY;
   document.getElementById("Img").style.left=(parseInt(x)+10)+"px";
   document.getElementById("Img").style.top=y+"px";
  }
 //入口
 function Main()
 {
   var ele=document.getElementById("Main");
   //注册鼠标移动事件
   ele.onmousemove=function(){GetMouse(event);}
   // 注册鼠标按下事件
  ele.onmousedown=function(){ChangeBg("Img","images/113.gif");}
   //注册鼠标弹回事件
   ele.onmouseup=function(){ChangeBg("Img","images/115.gif");}
  }
 //图片变化
 function ChangeBg(id,url)
 {
   document.getElementById(id).src=url;
 }
</script>
</body> 
</html>