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程序设计有所帮助。