jQuery实现Div拖动+键盘控制综合效果的方法
本文实例讲述了jQuery实现Div拖动+键盘控制综合效果的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQueryDiv拖动+键盘控制综合效果</title> <metahttp-equiv="content-type"content="text/html;charset=gb2312"> <scriptsrc="/ajaxjs/jquery1.3.2.js"></script> </head> <body> 预览时看不到效果,刷新一下即可 <divid="text"style="width:120px;height:60px;background:#F06;position:absolute;left:500px;top:90px;cursor:move;"></div> <scripttype="text/javascript"> varmsgObj=document.getElementById('text'); varposx=0; varposy=0; varmoveable=false; varMouseDownEvent=document.onmousedown; varMouseMoveEvent=document.onmousemove; varMouseUpEvent=document.onmouseup; msgObj.onmousedown=function(evt){ varevt=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){ varevt=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; } }; } varv=1; vara=0.9; varh=document.documentElement.clientHeight; functionscroll(){ vartimer=setInterval(function(){ v+=a; vartop=(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){ vare=e||window.event; if(e.which==13){ scroll(); } }) varx=4; vary=4; functionnewpro(){ varHeight=document.documentElement.clientHeight; varWidth=document.documentElement.clientWidth; varnewobj=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='<divid="minbox"></div>'; document.body.appendChild(newobj); change(); } functionchange(){ varminobj=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>
希望本文所述对大家的jQuery程序设计有所帮助。