拖拽+碰撞+重力加速度

来源：互联网发布：淘宝日本代购有真的吗编辑：程序博客网时间：2024/04/28 07:26
鼠标在标题处按下，然后拖动，放下的那一刻执行碰撞+重力加速度事件
<!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>
3 0