jQuery实现Div拖动+键盘控制综合效果的方法

当前位置：首页 > 范文|应用文 > IT技术专栏 > 脚本栏目

来源：阅读：1009 次日期：2015-03-12 14:23:47

温馨提示：小编为您整理了“jQuery实现Div拖动+键盘控制综合效果的方法”,方便广大网友查阅！

这篇文章主要介绍了jQuery实现Div拖动+键盘控制综合效果的方法,实例分析了jQuery操作div块拖动的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery实现Div拖动+键盘控制综合效果的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>jQuery Div拖动+键盘控制综合效果</title>

</head>

<body>

预览时看不到效果，刷新一下即可

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>

希望本文所述对大家的jQuery程序设计有所帮助。

更多信息请查看IT技术专栏

上一篇：jQuery仿Flash上下翻动的中英文导航菜单实例

下一篇：js鼠标点击图片实现随机变换图片的方法

手机网站地址：jQuery实现Div拖动+键盘控制综合效果的方法

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！