编程 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 相关文章推荐

漂亮的jquery提示效果(仿腾讯弹出层)

Feb 05 Javascript

javascript实现多级联动下拉菜单的方法

Feb 06 Javascript

javascript实现方法调用与方法触发小结

Mar 26 Javascript

js canvas实现擦除动画

Jul 16 Javascript

bootstrap与Jquery UI 按钮样式冲突的解决办法

Sep 23 Javascript

input输入密码变黑点密文的实现方法

Jan 09 Javascript

微信小程序 picker 组件详解及简单实例

Jan 10 Javascript

微信小程序下拉列表的实现实例代码

Mar 08 Javascript

vue自定义移动端touch事件之点击、滑动、长按事件

Jul 10 Javascript

Angular使用ControlValueAccessor创建自定义表单控件

Mar 08 Javascript

详解Vue中的scoped及穿透方法

Apr 18 Javascript

Vue学习之常用指令实例详解

Jan 06 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

PHP mb_convert_encoding文字编码的转换函数介绍

2011/11/10 PHP

twig里使用js变量的方法

2016/02/05 PHP

PHP互换两个变量值的方法(不用第三变量)

2016/11/14 PHP

PHP异常类及异常处理操作实例详解

2018/12/19 PHP

PHP哈希表实现算法原理解析

2020/12/11 PHP

基于JQuery的简单实现折叠菜单代码

2010/09/15 Javascript

JsDom 编程小结

2011/08/09 Javascript

javascript中IE浏览器不支持NEW DATE()带参数的解决方法

2012/03/01 Javascript

js面向对象多种创建对象方法小结

2012/05/21 Javascript

解决JS浮点数运算出现Bug的方法

2013/03/12 Javascript

9行javascript代码获取QQ群成员具体实现

2013/10/16 Javascript

javaScript实现滚动新闻的方法

2015/07/30 Javascript

jQuery实现的手风琴侧边菜单效果

2017/03/29 jQuery

JavaScript中this的用法及this在不同应用场景的作用解析

2017/04/13 Javascript

Vue学习笔记进阶篇之单元素过度

2017/07/19 Javascript

微信小程序实现流程进度的图样式功能

2018/01/16 Javascript

JavaScript碎片—函数闭包（模拟面向对象）

2019/03/13 Javascript

Egg Vue SSR 服务端渲染数据请求与asyncData

2019/11/24 Javascript

微信小程序wx.navigateTo方法里的events参数使用详情及场景

2020/01/07 Javascript

weui上传多图片,压缩,base64编码的示例代码

2020/06/22 Javascript

如何利用node转发请求详解

2020/09/17 Javascript

JavaScript快速调试的两个技巧

2020/11/04 Javascript

python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序

2020/07/20 Python

python3学生名片管理v2.0版

2018/11/29 Python

Python3 max()函数基础用法

2019/02/19 Python

python错误调试及单元文档测试过程解析

2019/12/19 Python

Python 剪绳子的多种思路实现(动态规划和贪心)

2020/02/24 Python

html5文字阴影效果text-shadow使用示例

2013/07/25 HTML / CSS

6号汽车旅馆预订：Motel 6

2018/02/11 全球购物

Schecker荷兰：狗狗用品和配件

2019/06/06 全球购物

协议书怎么写

2014/04/21 职场文书

2014办公室年度工作总结

2014/12/09 职场文书

技术员岗位职责

2015/02/04 职场文书

党支部综合考察意见

2015/06/01 职场文书

在职证明书模板

2015/06/15 职场文书

我的暑假生活作文（五年级）范文

2019/08/07 职场文书