编程 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 showModalDialog 多层模态窗口实现页面提交及刷新的代码

Nov 28 Javascript

jQuery判断数组是否包含了指定的元素

Mar 10 Javascript

JQuery点击行tr实现checkBox选中的简单实例

May 26 Javascript

Move.js入门

Feb 08 Javascript

Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)

May 30 Javascript

JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】

Aug 18 Javascript

浅谈React Native Flexbox布局(小结)

Jan 08 Javascript

JS实现访问DOM对象指定节点的方法示例

Apr 04 Javascript

JS实现“全选”和"全不选"功能代码实例

Feb 06 Javascript

JS监听组合按键思路及实现过程

Apr 17 Javascript

Vue Cli3 打包配置并自动忽略console.log语句的方法

Apr 23 Javascript

js HTML DOM EventListener功能与用法实例分析

Apr 27 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

NO3第三帝国留言簿制作过程

2006/10/09 PHP

php代码把全角数字转为半角数字

2007/12/10 PHP

PHP调用VC编写的COM组件实例

2014/03/29 PHP

PHP正则匹配日期和时间(时间戳转换)的实例代码

2016/12/14 PHP

php实现留言板功能

2017/03/05 PHP

PHPMailer使用QQ邮箱实现邮件发送功能

2017/08/18 PHP

php实现QQ小程序发送模板消息功能

2019/09/18 PHP

php对mongodb的扩展(初识如故)

2012/11/11 Javascript

使用js检测浏览器的实现代码

2013/05/14 Javascript

jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

2013/07/01 Javascript

根据表格中的某一列进行排序的javascript代码

2013/11/29 Javascript

node.js中的socket.io入门实例

2014/04/26 Javascript

jQuery.parseJSON(json)将JSON字符串转换成js对象

2014/07/27 Javascript

JS数组的常见用法实例

2015/02/10 Javascript

基于javascript实现九九乘法表

2016/03/27 Javascript

浅谈几种常用的JS类定义方法

2016/06/08 Javascript

Bootstarp 基础教程之表单部分实例代码

2017/02/03 Javascript

js中变量的连续赋值(实例讲解)

2017/07/08 Javascript

jQuery Dom元素操作技巧

2018/02/04 jQuery

vue实现自定义H5视频播放器的方法步骤

2019/07/01 Javascript

用 js 写一个 js 解释器过程详解

2019/08/02 Javascript

11个Javascript小技巧帮你提升代码质量(小结)

2020/12/28 Javascript

Python生成验证码实例

2014/08/21 Python

Python中input和raw_input的一点区别

2014/10/21 Python

python贪吃蛇游戏代码

2020/04/18 Python

解决python super()调用多重继承函数的问题

2019/06/26 Python

Python 异常处理Ⅳ过程图解

2019/10/18 Python

如何在Python 游戏中模拟引力

2020/03/27 Python

html5的画布canvas——画出简单的矩形、三角形实例代码

2013/06/09 HTML / CSS

canvas压缩图片以及卡片制作的方法示例

2018/12/04 HTML / CSS

英国高街奥特莱斯：Highstreet Outlet

2019/11/21 全球购物

初一生物教学反思

2014/01/18 职场文书

老公给老婆的保证书

2014/04/28 职场文书

民政工作个人总结

2015/02/28 职场文书

2015年中学体育教师工作总结

2015/10/23 职场文书

干部作风纪律整顿心得体会

2016/01/23 职场文书