编程 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结合ajax读取txt文件内容

Dec 05 Javascript

js对字符的验证方法汇总

Feb 04 Javascript

基于jQuery实现页面搜索功能

Mar 26 Javascript

同步异步动态引入js文件的几种方法总结

Sep 23 Javascript

js实现点击按钮弹出上传文件的窗口

Dec 23 Javascript

JS判断一个数是否是水仙花数

Jun 11 Javascript

结合mint-ui移动端下拉加载实践方法总结

Nov 08 Javascript

vue2.0 父组件给子组件传递数据的方法

Jan 15 Javascript

js实现各浏览器全屏代码实例

Jul 03 Javascript

layui 设置table 行的高度方法

Aug 17 Javascript

原生js通过一行代码实现简易轮播图

Jun 05 Javascript

JavaScript常用进制转换及位运算实例解析

Oct 14 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将对象转换成数组的方法(兼容多维数组类型)

2013/06/21 PHP

PHP 如何利用phpexcel导入数据库

2013/08/24 PHP

Prototype使用指南之enumerable.js

2007/01/10 Javascript

javaScript函数中执行C#代码中的函数方法总结

2013/08/07 Javascript

Javascript中的getUTCDay()方法使用详解

2015/06/10 Javascript

js结合正则实现国内手机号段校验

2015/06/19 Javascript

js实现Select头像选择实时预览代码

2015/08/17 Javascript

jQuery mobile 移动web(4)

2015/12/20 Javascript

JS判断浏览器是否安装flash插件的简单方法

2016/09/13 Javascript

angular实现form验证实例代码

2017/01/17 Javascript

详解webpack 多页面/入口支持&公共组件单独打包

2017/06/29 Javascript

JavaScript实现计数器基础方法

2017/10/10 Javascript

基于js 各种排序方法和sort方法的区别(详解)

2018/01/03 Javascript

详解angular脏检查原理及伪代码实现

2018/06/08 Javascript

手把手教你使用TypeScript开发Node.js应用

2019/05/06 Javascript

详解Vue-cli3.X使用px2rem遇到的问题

2019/08/09 Javascript

如何实现iframe父子传参通信

2020/02/05 Javascript

autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法

2020/05/03 Javascript

微信小程序实现电子签名并导出图片

2020/05/27 Javascript

[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示

2017/07/15 DOTA

详解python的数字类型变量与其方法

2016/11/20 Python

Python实现句子翻译功能

2017/11/14 Python

python中set()函数简介及实例解析

2018/01/09 Python

关于python下cv.waitKey无响应的原因及解决方法

2019/01/10 Python

在Python 中同一个类两个函数间变量的调用方法

2019/01/31 Python

python tools实现视频的每一帧提取并保存

2020/03/20 Python

对python中的*args与**kwgs的含义与作用详解

2019/08/28 Python

Numpy与Pytorch 矩阵操作方式

2019/12/27 Python

Django bulk_create()、update()与数据库事务的效率对比分析

2020/05/15 Python

如何卸载python插件

2020/07/08 Python

通过实例解析python and和or使用方法

2020/11/14 Python

开平碉楼导游词

2015/02/06 职场文书

节约用电通知

2015/04/25 职场文书

评奖评优个人先进事迹材料

2015/11/04 职场文书

教师学习心得体会范文

2016/01/21 职场文书

Python实战实现爬取天气数据并完成可视化分析详解

2022/06/16 Python