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

自己整理的一个javascript日期处理函数

Oct 16 Javascript

js 获取(接收)地址栏参数值的方法

Apr 01 Javascript

给Flash加一个超链接(推荐使用透明层)兼容主流浏览器

Jun 09 Javascript

JavaScript实现的使用键盘控制人物走动实例

Aug 27 Javascript

JS实现网页游戏中滑块响应鼠标点击移动效果

Oct 19 Javascript

详解浏览器渲染页面过程

Feb 09 Javascript

jquery 禁止鼠标右键并监听右键事件

Apr 27 jQuery

JS+CSS实现网页加载中的动画效果

Oct 27 Javascript

详解使用webpack+electron+reactJs开发windows桌面应用

Feb 01 Javascript

Vue.js中使用Vuex实现组件数据共享案例

Jul 31 Javascript

electron踩坑之remote of undefined的解决

Oct 06 Javascript

jquery实现图片放大镜效果

Dec 23 jQuery

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

CPU步进是什么意思？i3-9100F B0步进和U0步进区别知识科普

2020/03/17 数码科技

探讨file_get_contents与curl效率及稳定性的分析

2013/06/06 PHP

利用php操作memcache缓存的基础方法示例

2017/08/02 PHP

php使用redis的几种常见操作方式和用法示例

2020/02/20 PHP

转一个日期输入控件，支持FF

2007/04/27 Javascript

详解new function(){}和function(){}() 区别分析

2008/03/22 Javascript

使用Jquery实现点击文字后变成文本框且可修改

2013/09/21 Javascript

JS输入用户名自动显示邮箱后缀列表的方法

2015/01/27 Javascript

使用JavaScript实现旋转的彩圈特效

2015/06/23 Javascript

JS组件Bootstrap Table使用实例分享

2016/05/30 Javascript

javascript运算符——位运算符全面介绍

2016/07/14 Javascript

详解AngularJs HTTP响应拦截器实现登陆、权限校验

2017/04/11 Javascript

javascript 作用于作用域链的详解

2017/09/27 Javascript

使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

2017/11/27 Javascript

浅谈js中的bind

2019/03/18 Javascript

Vue 用Vant实现时间选择器的示例代码

2019/10/25 Javascript

开发Node CLI构建微信小程序脚手架的示例

2020/03/27 Javascript

python实现ip查询示例

2014/03/26 Python

python使用Flask框架获取用户IP地址的方法

2015/03/21 Python

在Python的Django框架中显示对象子集的方法

2015/07/21 Python

Python网络编程详解

2017/10/31 Python

Python实现学生成绩管理系统

2020/04/05 Python

Python简单过滤字母和数字的方法小结

2019/01/09 Python

在Django的View中使用asyncio的方法

2019/07/12 Python

python实现的生成word文档功能示例

2019/08/23 Python

Python实现TCP通信的示例代码

2019/09/09 Python

Python多继承以及MRO顺序的使用

2019/11/11 Python

Python numpy数组转置与轴变换

2019/11/15 Python

便携式太阳能系统的创新者：GOAL ZERO

2018/02/04 全球购物

意大利在线药房：Saninforma

2021/02/11 全球购物

优秀生推荐信范文

2013/11/28 职场文书

铲车司机岗位职责

2014/03/15 职场文书

小学生家长寄语

2014/04/02 职场文书

《学会合作》教学反思

2014/04/12 职场文书

党课培训心得体会

2014/09/02 职场文书

2015年全民创业工作总结

2015/07/23 职场文书