编程 Javascript

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

Posted in Javascript onMarch 10, 2015

本文实例讲述了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="/ajaxjs/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>

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

- Author -

hcqenjoy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

16个最流行的JavaScript框架[推荐]

May 29 Javascript

jQuery :nth-child前有无空格的区别分析

Jul 11 Javascript

对jQuery的事件绑定的一些思考(补充)

Apr 20 Javascript

使用javascript控制cookie显示和隐藏背景图

Feb 12 Javascript

简单实现限制uploadify上传个数

Nov 16 Javascript

React-Native左右联动List的示例代码

Sep 21 Javascript

详解JS函数stack size计算方法

Jun 18 Javascript

JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例

Jul 27 Javascript

Vue搭建后台系统需要注意的问题

Nov 08 Javascript

JavaScript获取当前url路径过程解析

Dec 27 Javascript

解决vue watch数据的方法被调用了两次的问题

Nov 07 Javascript

JavaScript实现商品评价五星好评

Nov 30 Javascript

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

Mar 10 #Javascript

js控制页面的全屏展示和退出全屏显示的方法

Mar 10 #Javascript

Javascript 正则表达式实现为数字添加千位分隔符

Mar 10 #Javascript

jquery+easeing实现仿flash的载入动画

Mar 10 #Javascript

javascript判断css3动画结束 css3动画结束的回调函数

Mar 10 #Javascript

jQuery实现表格颜色交替显示的方法

Mar 09 #Javascript

jQuery实现个性翻牌效果导航菜单的方法

Mar 09 #Javascript

You might like

解密ThinkPHP3.1.2版本之模块和操作映射

2014/06/19 PHP

PHP中你应该知道的require()文件包含的正确用法

2015/06/12 PHP

PHP实现分布式memcache设置web集群session同步的方法

2018/04/10 PHP

JavaScript中的noscript元素属性位置及作用介绍

2013/04/11 Javascript

Javascript设计模式之观察者模式的多个实现版本实例

2015/03/03 Javascript

Javascript实现检测客户端类型代码封包

2015/12/03 Javascript

DeviceOne 让你一见钟情的App快速开发平台

2016/02/17 Javascript

TypeOf这些知识点你了解吗

2016/02/21 Javascript

jquery实现无刷新验证码的简单实例

2016/05/19 Javascript

js 判断附件后缀的简单实现方法

2016/10/11 Javascript

浅谈js对象的创建和对6种继承模式的理解和遐想

2016/10/16 Javascript

vue router自动判断左右翻页转场动画效果

2017/10/10 Javascript

利用js将ajax获取到的后台数据动态加载至网页中的方法

2018/08/08 Javascript

JavaScript动态创建二维数组的方法示例

2019/02/01 Javascript

vue实现分页的三种效果

2020/06/23 Javascript

python开发之list操作实例分析

2016/02/22 Python

图文详解WinPE下安装Python

2016/05/17 Python

python实现汉诺塔递归算法经典案例

2021/03/01 Python

Python 实现12306登录功能实例代码

2018/02/09 Python

超简单使用Python换脸实例

2019/03/27 Python

基于Python实现签到脚本过程解析

2019/10/25 Python

Python爬取YY评级分数并保存数据实现过程解析

2020/06/01 Python

利用Python过滤相似文本的简单方法示例

2021/02/03 Python

如何反序的迭代一个序列？how do I iterate over a sequence in reverse order

2012/02/04 面试题

市三好学生主要事迹

2014/01/28 职场文书

店长职务说明书

2014/02/04 职场文书

不拖欠农民工工资承诺书

2014/03/31 职场文书

个人委托书怎么写

2014/04/04 职场文书

领导干部对照检查材料

2014/08/24 职场文书

志愿者爱心公益活动策划方案

2014/09/15 职场文书

手机被没收的检讨书

2014/10/04 职场文书

起诉书格式范文

2015/05/20 职场文书

《全神贯注》教学反思

2016/02/22 职场文书

python用字节处理文件实例讲解

2021/04/13 Python

Python道路车道线检测的实现

2021/06/27 Python

pandas进行数据输入和输出的方法详解

2022/03/23 Python