<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>
