<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标示例,磁性吸附效果</title>
<style>
#div1 { width:100px; height:100px; position:absolute; background-color:#7391C5; }
#img1 { position:absolute}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oImg = document.getElementById('img1');
tqfc(oDiv);
tqfc(oImg);
function tqfc(obj){
obj.onmousedown = function(ev){
var ev = ev || event;
var oDivX = ev.clientX - this.offsetLeft;
var oDivY = ev.clientY - this.offsetTop;
obj.style.backgroundColor = 'red';
//加入兼容问题
if(obj.setCapture){
obj.setCapture();
}
document.onmousemove = function(ev){ //注意这里是document
var ev = ev || event;
L = ev.clientX - oDivX;
T = ev.clientY - oDivY;
//限制不超出可视范围
if(L<100){ //磁性吸附重点在于这里,原本是0,改成100
L = 0;
}else if(L>document.documentElement.clientWidth - obj.offsetWidth){
L = document.documentElement.clientWidth - obj.offsetWidth;
}
if(T<0){
T = 0;
}else if(T>document.documentElement.clientHeight - obj.offsetHeight){
T = document.documentElement.clientHeight - obj.offsetHeight;
}
obj.style.left = L + 'px';
obj.style.top = T + 'px';
}
return false;
}
obj.onmouseup = function(){
document.onmousedown = document.onmousemove = null;
obj.style.backgroundColor = '#7391C5';
//加入兼容问题
if( obj.releaseCapture ){
obj.releaseCapture();
}
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
<img src="标签图片/1.JPG" width="100" id="img1"/>
</body>
</html>
JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标,磁性吸附效果示例
最新推荐文章于 2024-07-07 16:14:45 发布