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

关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级

Oct 14 Javascript

node.js中的path.dirname方法使用说明

Dec 09 Javascript

localResizeIMG先压缩后使用ajax无刷新上传（移动端）

Aug 11 Javascript

基于jquery实现二级联动效果

Mar 30 jQuery

微信小程序开发之全局配置

May 05 Javascript

Vue实现路由跳转和嵌套

Jun 20 Javascript

setTimeout时间设置为0详细解析

Mar 13 Javascript

Angular Renderer (渲染器)的具体使用

May 03 Javascript

echarts同一页面中四个图表切换的js数据交互方法示例

Jul 03 Javascript

使用mixins实现elementUI表单全局验证的解决方法

Apr 02 Javascript

生成无限制的微信小程序码的示例代码

Sep 20 Javascript

JS中forEach()、map()、every()、some()和filter()的用法

May 11 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

ThinkPHP php 框架学习笔记

2009/10/30 PHP

PHP中SESSION的注销与清除

2015/04/16 PHP

php实现的Curl封装类Curl.class.php用法实例分析

2015/09/25 PHP

Yii2隐藏frontend/web和backend/web的方法

2015/12/12 PHP

PHP结合Ffmpeg快速搭建流媒体服务的实践记录

2018/10/31 PHP

PHP设计模式（五）适配器模式Adapter实例详解【结构型】

2020/05/02 PHP

JQuery最佳实践之精妙的自定义事件

2010/08/11 Javascript

用Juery网页选项卡实现代码

2011/06/13 Javascript

JavaScript打字小游戏代码

2011/12/26 Javascript

js简单的弹出框有关闭按钮

2014/05/05 Javascript

javascript中2个感叹号的用法实例详解

2014/09/04 Javascript

js+ajax实现获取文件大小的方法

2015/12/08 Javascript

js+css实现回到顶部按钮（back to top）

2016/03/02 Javascript

分享JS数组求和与求最大值的方法

2016/08/11 Javascript

Angular 输入框实现自定义验证功能

2017/02/19 Javascript

自制简易打赏功能的实例

2017/09/02 Javascript

JavaScript数组排序reverse()和sort()方法详解

2017/12/24 Javascript

web前端页面生成exe可执行文件的方法

2018/02/08 Javascript

基于Vue中点击组件外关闭组件的实现方法

2018/03/06 Javascript

微信小程序实现的3d轮播图效果示例【基于swiper组件】

2018/12/11 Javascript

layUI实现列表查询功能

2019/07/27 Javascript

详解JWT token心得与使用实例

2019/08/02 Javascript

JavaScript实现图片上传并预览并提交ajax

2019/09/30 Javascript

你知道JavaScript Symbol类型怎么用吗

2020/01/08 Javascript

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

2020/05/19 Javascript

用Python将结果保存为xlsx的方法

2019/01/28 Python

将string类型的数据类型转换为spark rdd时报错的解决方法

2019/02/18 Python

Python项目基于Scapy实现SYN泛洪攻击的方法

2019/07/23 Python

python提取xml里面的链接源码详解

2019/10/15 Python

python运用pygame库实现双人弹球小游戏

2019/11/25 Python

HTML5的结构和语义(5):内嵌媒体

2008/10/17 HTML / CSS

Feelunique美国：欧洲大型的在线美妆零售电商

2018/11/04 全球购物

Yahoo-PHP面试题2

2014/12/06 面试题

团工委书记自荐书范文

2013/12/17 职场文书

高二英语教学反思

2014/01/19 职场文书

设计师求职信模板

2014/05/06 职场文书