jQuery实现Div拖动+键盘控制综合效果的方法
jQuery实现Div拖动+键盘控制综合效果的方法
发布时间:2016-12-30 来源:查字典编辑
摘要:本文实例讲述了jQuery实现Div拖动+键盘控制综合效果的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:jQueryDi...

本文实例讲述了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="content-type" content="text/html;charset=gb2312">

<script src="http://www.jb51.netajaxjs/jquery1.3.2.js"></script>

</head>

<body>

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

<div id="text"></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>

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类