<meta name="description" content="網頁描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
div{height:300px;width:300px;position:absolute;top:10px;left:20px;background:red;}
</style>
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript">
//先加載頁面
$(function(){
//先獲得對象
var imgObj=document.getElementById("imges");
//當鼠標按下時
imgObj.onmousedown =function(event){
var imgX=event.clientX-imgObj.offsetLeft;
var imgY=event.clientY-imgObj.offsetTop;
//當鼠標按下並移動是時候
//注意這是移動是對文檔
document.onmouseover =function(event){
var overX=event.clientX-imgX;
var overY=event.clientY-imgY;
imgObj.style.left=overX+"px";
imgObj.style.top=overY+"px";
}
//當鼠標離開時就調用函數把鼠標覆蓋置爲空；
document.οnmοuseup= function(){
document.οnmοuseοver=null;
}
}
})
</script>
</head>
<body>
<div id="imges"></div>
</body>
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
div{height:300px;width:300px;position:absolute;top:10px;left:20px;background:red;}
</style>
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript">
//先加載頁面
$(function(){
//先獲得對象
var imgObj=document.getElementById("imges");
//當鼠標按下時
imgObj.onmousedown =function(event){
var imgX=event.clientX-imgObj.offsetLeft;
var imgY=event.clientY-imgObj.offsetTop;
//當鼠標按下並移動是時候
//注意這是移動是對文檔
document.onmouseover =function(event){
var overX=event.clientX-imgX;
var overY=event.clientY-imgY;
imgObj.style.left=overX+"px";
imgObj.style.top=overY+"px";
}
//當鼠標離開時就調用函數把鼠標覆蓋置爲空；
document.οnmοuseup= function(){
document.οnmοuseοver=null;
}
}
})
</script>
</head>
<body>
<div id="imges"></div>
</body>
</html>
效果圖：
