鼠标在标题处按下，然后拖动，放下的那一刻执行碰撞+重力加速度事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>拖拽+碰撞+重力加速度</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css" media="screen">
*{margin:0; padding: 0;}
li{list-style: none;}
a{text-decoration: none; color:#333;}
a:hover{color:green;}
#box{position: absolute; top:100px; left:35%; background-color:#fff; width:400px; border:1px solid #ccc; -webkit-border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; border-radius:4px;}
#box h2{ height: 34px; line-height:34px; padding:2px 10px; font-size:14px; color:#666; background-color: #f8f8f8; border-bottom:1px solid #ccc; -webkit-border-radius:4px 4px 0 0; -moz-border-radius:4px 4px 0 0; -o-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0; cursor:move;}
#box .cont{padding: 10px;}
#box .cont li{ line-height: 24px; margin-bottom: 3px;}
</style>
</head>
<body>
<script>
window.onload = function(){
var oDiv = document.getElementById('box');
var oH = oDiv.getElementsByTagName('h2')[0];
var lastX = 0;
var lastY = 0;
oH.onmousedown = function(e){
var e = e||event;
// 鼠标与物体左侧和上侧的距离
var disX = e.clientX - oDiv.offsetLeft;
var disY = e.clientY - oDiv.offsetTop;
document.onmousemove = function(e){
var e = e||event;
var l = e.clientX - disX;
var t = e.clientY - disY;
if(l <= 0){
l = 0;
}else if(l > document.documentElement.clientWidth - oDiv.offsetWidth){
l=document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(t<=0){
t=0;
}else if(t > document.documentElement.clientHeight - oDiv.offsetHeight){
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
// 瞬间上次
iSpeedX = l - lastX;
iSpeedY = t - lastY;
lastX = l;
lastY = t;
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
startmove(oDiv);
}
clearInterval(timer);
}
}
// 速度
var iSpeedX = 0;
var iSpeedY = 0;
var timer = null;
function startmove(obj){
clearInterval(timer);
timer = setInterval(function(){
// 重力加速度
iSpeedY +=3;
var l = obj.offsetLeft + iSpeedX;
var t = obj.offsetTop + iSpeedY;
if(t>=document.documentElement.clientHeight - obj.offsetHeight){
iSpeedY *= - 0.8;
iSpeedX *= 0.8;
t=document.documentElement.clientHeight - obj.offsetHeight;
}else if(t<=0){
iSpeedY *= -0.8;
iSpeedX *= 0.8;
t = 0;
}
if(l>=document.documentElement.clientWidth - obj.offsetWidth){
iSpeedX *= -0.8;
l=document.documentElement.clientWidth - obj.offsetWidth;
}else if(l<=0){
iSpeedX *= -0.8;
l = 0;
}
// 解决小数问题
if(Math.abs(iSpeedX)<1){
iSpeedX=0;
}
if(Math.abs(iSpeedY)<1){
iSpeedY=0;
}
if(iSpeedY==0 && iSpeedX==0 && t==document.documentElement.clientHeight-obj.offsetHeight){
clearInterval(timer);
}
obj.style.top = t + 'px';
obj.style.left = l + 'px';
},30);
}
</script>
<div id="box">
<h2>浏览</h2>
<div class="cont">
<ul>
<li><a href="http://www.ruizhengyun.cn/" title="" target="_blank">网站简介</a></li>
<li><a href="http://www.ruizhengyun.cn/" title="" target="_blank">网站简介</a></li>
<li><a href="http://www.ruizhengyun.cn/" title="" target="_blank">网站简介</a></li>
<li><a href="http://www.ruizhengyun.cn/" title="" target="_blank">网站简介</a></li>
<li><a href="http://www.ruizhengyun.cn/" title="" target="_blank">网站简介</a></li>
<li><a href="http://www.ruizhengyun.cn/" title="" target="_blank">网站简介</a></li>
</ul>
</div>
</div>
</body>
</html>
拖拽+碰撞+重力加速度
时间： 2024-11-10 08:02:06