<style>
*{margin: 0; padding: 0;}
#div1{width: 150px; height: 150px; background: red; position: absolute;}
#div2{width: 600px; height: 500px; background: #ccc; position: absolute;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
var oDiv2=document.getElementById("div2");
var disX=0;
var disY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
if(oDiv.setCapture){//兼容ie9以下
oDiv.onmousemove=mouseMove;
oDiv.onmouseup=mouseUp;
oDiv.setCapture();
}else{//兼容其他浏览器
document.onmousemove=mouseMove;
document.onmouseup=function(ev){
this.onmousemove=null;
this.onmouseup=null;
};
}
return false;
};
function mouseMove(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
if(l<50){
l=0;
}else if(l>oDiv2.offsetWidth-oDiv.offsetWidth-50){
l=oDiv2.offsetWidth-oDiv.offsetWidth;
}
if(t<50){
t=0;
}else if(t>oDiv2.offsetHeight-oDiv.offsetHeight-50){
t=oDiv2.offsetHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+"px";
oDiv.style.top=t+"px";
};
function mouseUp(){
this.onmousemove=null;
this.onmouseup=null;
if(oDiv.releaseCapture){
oDiv.releaseCapture();
}
}
}
</script>
<div id="div2">
<div id="div1">时诵诗书双宿双飞社s少时诵诗书双宿双飞社</div>
</div>
上一篇:
js实现自定义滚动条
下一篇:
js鼠标事件跟随效果
友情提示:垃圾评论一律封号...