编程 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获取地址栏参数插件(模仿C#)

Oct 26 Javascript

了不起的node.js读书笔记之例程分析

Dec 22 Javascript

详解JavaScript中的every()方法

Jun 08 Javascript

AngularJS 简单应用实例

Jul 28 Javascript

微信小程序（应用号）简单实例应用及实例详解

Sep 26 Javascript

vue.js源代码core scedule.js学习笔记

Jul 03 Javascript

JS写谷歌浏览器chrome的外挂实例

Jan 11 Javascript

微信小程序实现topBar底部选择栏效果

Jul 20 Javascript

解决layui调用自定义方法提示未定义的问题

Sep 14 Javascript

JS实现水平移动与垂直移动动画

Dec 19 Javascript

微信小程序用canvas画图并分享

Mar 09 Javascript

vue中实现弹出层动画效果的示例代码

Sep 25 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注入实例

2006/10/09 PHP

php Mysql日期和时间函数集合

2007/11/16 PHP

php正则表达式(regar expression)

2011/09/10 PHP

163的邮件用phpmailer发送(实例详解)

2013/06/24 PHP

服务器上配置PHP运行环境教程

2015/02/12 PHP

php文件读取方法实例分析

2015/06/20 PHP

PHP代码优化技巧小结

2015/09/29 PHP

谈谈 PHP7新增功能

2015/12/16 PHP

Thinkphp5 微信公众号token验证不成功的原因及解决方法

2017/11/12 PHP

JS 创建对象(常见的几种方法)

2008/11/03 Javascript

jquery $.ajax入门应用二

2008/11/19 Javascript

JavaScript window.document的属性、方法和事件小结

2012/10/24 Javascript

原生js的弹出层且其内的窗口居中

2014/05/14 Javascript

jQuery 2.0.3 源码分析之core（一）整体架构

2014/05/27 Javascript

JS排序方法（sort，bubble，select，insert）代码汇总

2016/01/30 Javascript

微信小程序九宫格实例代码

2017/01/21 Javascript

vue教程之toast弹框全局调用示例详解

2020/08/24 Javascript

在vue-cli项目中使用bootstrap的方法示例

2018/04/21 Javascript

使用 vue-i18n 切换中英文效果

2018/05/23 Javascript

解决angularJS中input标签的ng-change事件无效问题

2018/09/13 Javascript

vue data恢复初始化数据的实现方法

2019/10/31 Javascript

[04:52]2015国际邀请赛LGD战队晋级之路

2015/08/14 DOTA

Python zip()函数用法实例分析

2018/03/17 Python

pandas读取CSV文件时查看修改各列的数据类型格式

2019/07/07 Python

pip指定python位置安装软件包的方法

2019/07/12 Python

Django中使用CORS实现跨域请求过程解析

2019/08/05 Python

python被修饰的函数消失问题解决(基于wraps函数)

2019/11/04 Python

python如何随机生成高强度密码

2020/08/19 Python

Python3如何在服务器打印资产信息

2020/08/27 Python

Made in Design英国：设计家具、照明、家庭装饰和花园家具

2019/09/24 全球购物

犯错检讨书

2014/02/21 职场文书

庆七一活动总结

2014/08/27 职场文书

小学英语教师2015年度个人工作总结

2015/10/14 职场文书

探讨Java中的深浅拷贝问题

2021/06/26 Java/Android

快速学习Oracle触发器和游标

2021/06/30 Oracle

浅谈Redis位图(Bitmap)及Redis二进制中的问题

2021/07/15 Redis