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