- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
jQuery Div拖动+键盘控制综合效果，随意拖动大方块，想拖动哪就是哪，按回车键，方块还能做自由落体运动。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Div拖动+键盘控制综合效果</title> <meta http-equiv="mrc-type" mrc="text/html;charset=gb2312"> <script src="http://p1.mb5u.com/texiao/jquery1.3.2.js"></script> </head> <body> 预览时看不到效果，刷新一下即可 <div id="text" style="width:120px;height:60px;background:#F06;position:absolute;left:500px;top:90px;cursor:move;"></div> <script type="text/javascript"> var msgObj = document.getElementById('text'); var posx = 0; var posy = 0; var moveable = false; var MouseDownEvent = document.onmousedown; var MouseMoveEvent = document.onmousemove; var MouseUpEvent = document.onmouseup; msgObj.onmousedown = function(evt) { var evt = evt||window.event; moveable = true; posy = evt.clientY-parseInt(msgObj.style.top); posx = evt.clientX-parseInt(msgObj.style.left); document.onmousemove = function(evt) { if (moveable) { var evt = evt||window.event; msgObj.style.left = evt.clientX - posx + "px"; msgObj.style.top = evt.clientY - posy + "px"; } change(); }; document.onmouseup = function () { if (moveable) { document.onmousemove = MouseMoveEvent; document.onmouseup = MouseUpEvent; moveable = false; posx = 0; posy = 0; } }; } var v=1; var a=0.9; var h=document.documentElement.clientHeight; function scroll(){ var timer=setInterval(function(){ v +=a; var top=(parseInt(msgObj.style.top)||0); if(top+v>h-70){ if(v<2)clearInterval(timer); msgObj.style.top=h-70+"px"; v=-v*0.5; }else{ msgObj.style.top=top+v+"px"; } change(); },10); }; $(document).keyup(function(e){ var e = e || window.event ; if(e.which == 13){ scroll(); } }) var x = 4 ; var y = 4 ; function newpro(){ var Height = document.documentElement.clientHeight ; var Width = document.documentElement.clientWidth ; var newobj = document.createElement('div'); newobj.setAttribute('id','bigbox'); newobj.style.position = 'absolute'; newobj.style.left = 20 +"px"; newobj.style.top = 80 +"px"; newobj.style.height = Height/x +"px" ; newobj.style.width = Width/y +"px" ; newobj.style.borderWidth = 1+"px"; newobj.style.borderColor = "#ff6500"; newobj.style.borderStyle = 'solid' ; newobj.innerHTML='<div id="minbox"></div>'; document.body.appendChild(newobj); change(); } function change(){ var minobj = document.getElementById('minbox'); minobj.style.position = 'absolute'; minobj.style.left = parseInt(msgObj.style.left)/x +"px"; minobj.style.top = parseInt(msgObj.style.top)/y +"px"; minobj.style.height = 20 +"px" ; minobj.style.width = 30 +"px" ; minobj.style.background = "#F06"; } window.onload = function(){ newpro(); } </script> </body> </html>