js实现拖拽+碰撞+重力
生活随笔
收集整理的這篇文章主要介紹了
js实现拖拽+碰撞+重力
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js實現拖拽+碰撞+重力</title>
<script>
window.onload=function ()
{ var notice=document.getElementById("notice")
var h2=document.getElementById('h2');
var closed=document.getElementById("closed");
var other=document.getElementById("other")
var lastX=0;
var lastY=0;
var timer=null;
var start=true;
var iSpeedX=0;
var iSpeedY=0;
closed.onclick=function(){
clearInterval(timer);
window.clearInterval(start)
startMoves(notice,{left:-240,top:0},move_type.buffer,function(){other.style.display="block";})
}
other.onclick=function(){
var l=(document.documentElement.clientWidth-notice.offsetWidth)/2
var t=(document.documentElement.clientHeight-notice.offsetHeight)/2
other.style.display="none";
startMoves(notice,{ top:parseInt(t),left:parseInt(l)},move_type.buffer)
}
start=window.setInterval( startMove,1000);
h2.onmousedown=function (ev)
{
var oEvent=ev||event;var disX=oEvent.clientX-notice.offsetLeft;
var disY=oEvent.clientY-notice.offsetTop;document.onmousemove=function (ev)
{
var oEvent=ev||event;var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-notice.offsetWidth)
{
l=document.documentElement.clientWidth-notice.offsetWidth;
}if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-notice.offsetHeight)
{
t=document.documentElement.clientHeight-notice.offsetHeight;
}
notice.style.left=l+'px';
notice.style.top=t+'px';iSpeedX=l-lastX;
iSpeedY=t-lastY;lastX=l;
lastY=t;};document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;startMove();
};clearInterval(timer);
return false
};
function startMove(){
clearInterval(timer);timer=setInterval(function (){
var notice=document.getElementById('notice');iSpeedY+=3;var l=notice.offsetLeft+iSpeedX;
var t=notice.offsetTop+iSpeedY;
notice.style.margin=0;
if(t>=document.documentElement.clientHeight-notice.offsetHeight)
{
iSpeedY*=-0.8;
iSpeedX*=0.8;
t=document.documentElement.clientHeight-notice.offsetHeight;
}
else if(t<=0)
{
iSpeedY*=-1;
iSpeedX*=0.8;
t=0;
}if(l>=document.documentElement.clientWidth-notice.offsetWidth)
{
iSpeedX*=-0.8;
l=document.documentElement.clientWidth-notice.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(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-notice.offsetHeight)
{
clearInterval(timer);}
else
{
notice.style.left=l+'px';
notice.style.top=t+'px';
}
}, 30);
}
};</script>
</head><body>
<style type="text/css">
html, body, div,h2 {margin:0px; padding:0px; font-size:12px;}
body {background-image:url(http://img1.t.sinajs.cn/t4/skin/skin005/images/mm_body_bg.jpg); background-repeat:no-repeat; background-position:center 0; background-color:#004B7D}
#notice {width:260px;height:260px;position:absolute;overflow:hidden; border-radius:3px; margin-top:-130px; top:50%; left:50%; margin-left:-130px; }
#bg {width:260px;height:260px;position:absolute;top:0px;left:0px;background:#000000;opacity:0.3;z-index:3; filter:alpha(opacity=30) }
#information {background:#EDEDED;width:250px;height:250px;z-index:5;position:absolute;left:5px;top:5px;}
#information h2{ border:2px solid #F00; position:relative; font-weight:normal; font-size:13px; height:26px; line-height:26px; background:#F9C; padding-left:10px; cursor:move;}
#information a{ position:absolute; right:5px; top:4px; height:16px; width:16px; display:block; line-height:16px; background:#FFF; text-align:center; border-radius:30px; z-index:999; cursor:pointer;}
#other{ width:20px; height:260px; background:#F99; z-index:9999; position:absolute; left:240px; top:0; border-radius:0px 5px 5px 0; display:none; cursor:pointer; text-align:center;}
</style>
<div id="notice">
<div id="information">
<h2 id="h2">親點擊我可以拖拽哦！<a id="closed" title="點擊我隱藏">×</a></h2>
</div>
<div id="bg"></div>
<div id="other">點擊我顯示吧</div>
</div>
<script type="text/javascript">
function css(obj, attr, value)
{
if(arguments.length==2)
{
if(attr!='opacity')
{
return parseInt(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
}
else
{
return Math.round(100*parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]));
}
}
else if(arguments.length==3)
switch(attr)
{
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
value=Math.max(value,0);
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
obj.style[attr]=value+'px';
break;
case 'opacity':
obj.style.filter="alpha(opacity:"+value+")";
obj.style.opacity=value/100;
break;
default:
obj.style[attr]=value;
}return function (attr_in, value_in){css(obj, attr_in, value_in)};
}var move_type={
buffer: 1,
flex: 2
};function stopMove(obj)
{
clearInterval(obj.timer);
}function startMoves(obj, oTarget, iType, fnCallBack, fnDuring)
{
//obj是指要運動的物體
//itype是要采取哪種類型的運動move_type.buffer為緩沖運動，move_type.flex彈性運動。
//oTarget是目標要運行到多少來.默認是px所以不需要帶單位。
//fnCallBack運動結束要做些什么。
//fnduring在運動中要進行什么
var fnMove=null;
if(obj.timer)
{
clearInterval(obj.timer);
}switch(iType)
{
case move_type.buffer:
fnMove=doMoveBuffer;
break;
case move_type.flex:
fnMove=doMoveFlex;
break;
}obj.timer=setInterval(function (){
fnMove(obj, oTarget, fnCallBack, fnDuring);
}, 30);
}function doMoveBuffer(obj, oTarget, fnCallBack, fnDuring)
{
var bStop=true;
var attr='';
var speed=0;
var cur=0;for(attr in oTarget)
{
cur=css(obj, attr);
if(oTarget[attr]!=cur)
{
bStop=false;speed=(oTarget[attr]-cur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);css(obj, attr, cur+speed);
}
}if(fnDuring)fnDuring.call(obj);if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;if(fnCallBack)fnCallBack.call(obj);
}
}function doMoveFlex(obj, oTarget, fnCallBack, fnDuring)
{
var bStop=true;
var attr='';
var speed=0;
var cur=0;for(attr in oTarget)
{
if(!obj.oSpeed)obj.oSpeed={};
if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
cur=css(obj, attr);
if(Math.abs(oTarget[attr]-cur)>=1 || Math.abs(obj.oSpeed[attr])>=1)
{
bStop=false;obj.oSpeed[attr]+=(oTarget[attr]-cur)/5;
obj.oSpeed[attr]*=0.7;css(obj, attr, cur+obj.oSpeed[attr]);
}
}if(fnDuring)fnDuring.call(obj);if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;if(fnCallBack)fnCallBack.call(obj);
}
}
</script>
</body>
</html>
轉載于:https://www.cnblogs.com/asqq/archive/2012/10/08/3194960.html
總結
以上是生活随笔為你收集整理的js实现拖拽+碰撞+重力的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 密室逃脱16珠子怎么转
- 下一篇： 关于琴的名言名句179个