编程 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入门教程(2) JS基础知识

Jan 31 Javascript

浏览器常用高宽的jquery插件

Feb 24 Javascript

IE下双击checkbox反应延迟问题的解决方法

Mar 27 Javascript

使用正则表达式的格式化与高亮显示json字符串

Dec 03 Javascript

IE下JS保存图片的简单实例

Jul 15 Javascript

AngularJS equal比较对象实例详解

Sep 14 Javascript

AngularJS通过$http和服务器通信详解

Sep 21 Javascript

js实现数组去重方法及效率?Ρ? target=

Feb 14 Javascript

vue使用stompjs实现mqtt消息推送通知

Jun 22 Javascript

JavaScript之DOM_动力节点Java学院整理

Jul 03 Javascript

浅谈vue+webpack项目调试方法步骤

Sep 11 Javascript

JS html事件冒泡和事件捕获操作示例

May 01 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实现从ftp服务器上下载文件树到本地电脑的程序

2009/02/10 PHP

使用PHP获取网络文件的实现代码

2010/01/01 PHP

php写的简易聊天室代码

2011/06/04 PHP

PHP中函数rand和mt_rand的区别比较

2012/12/26 PHP

控制PHP的输出：缓存并压缩动态页面

2013/06/11 PHP

php的一个简单加密解密代码

2014/01/14 PHP

PHP扩展Memcache分布式部署方案

2015/12/06 PHP

基于jquery的气泡提示效果

2010/05/31 Javascript

JQuery中SetTimeOut传参问题探讨

2013/05/10 Javascript

Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)

2013/06/17 Javascript

一个封装js代码-----展开收起效果示例

2013/07/03 Javascript

JS实现横向与竖向两个选项卡Tab联动的方法

2015/09/27 Javascript

利用iscroll4实现轮播图效果实例代码

2017/01/11 Javascript

解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

2018/09/27 Javascript

[03:16]DOTA2完美大师赛小组赛精彩集锦

2017/11/22 DOTA

python比较2个xml内容的方法

2015/05/11 Python

通过Python 接口使用OpenCV的方法

2018/04/02 Python

python3爬取数据至mysql的方法

2018/06/26 Python

Python爬虫框架Scrapy基本用法入门教程

2018/07/26 Python

python数据批量写入ScrolledText的优化方法

2018/10/11 Python

python numpy实现文件存取的示例代码

2019/05/26 Python

Python逐行读取文件内容的方法总结

2020/02/14 Python

Python动态导入模块和反射机制详解

2020/02/18 Python

详解python程序中的多任务

2020/09/16 Python

scrapy redis配置文件setting参数详解

2020/11/18 Python

python使用scapy模块实现ARP扫描的过程

2021/01/21 Python

新西兰航空中国官网：Air New Zealand China

2018/07/24 全球购物

应届生护士求职信

2013/11/01 职场文书

应聘面试自我评价

2014/01/24 职场文书

小学教师个人先进事迹材料

2014/05/17 职场文书

体育教师求职信

2014/06/30 职场文书

软件研发工程师岗位职责

2014/09/30 职场文书

主持人开幕词

2015/01/29 职场文书

小学体育组工作总结

2015/08/13 职场文书

纪检干部学习心得体会

2016/01/23 职场文书

能用CSS实现的就不要麻烦JavaScript了

2021/10/05 HTML / CSS