编程 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 组件之旅（三）：用 Ant 构建组件

Oct 28 Javascript

Javascript延迟执行实现方法(setTimeout)

Dec 30 Javascript

关于include标签导致js路径找不到的问题分析及解决

Jul 09 Javascript

jQuery中children()方法用法实例

Jan 07 Javascript

Jquery插件实现点击获取验证码后60秒内禁止重新获取

Mar 13 Javascript

详解JavaScript语言的基本语法要求

Nov 20 Javascript

浅析如何利用JavaScript进行语音识别

Oct 27 Javascript

Bootstrap响应式表格详解

May 23 Javascript

使用JS组件实现带ToolTip验证框的实例代码

Aug 23 Javascript

React Native中的RefreshContorl下拉刷新使用

Oct 09 Javascript

vue2.0 使用element-ui里的upload组件实现图片预览效果方法

Sep 04 Javascript

Vue单页面应用中实现Markdown渲染

Feb 14 Vue.js

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程序中防止盗链

2008/04/09 PHP

php设计模式 Prototype (原型模式)代码

2011/06/26 PHP

LotusPhp笔记之:Cookie组件的使用详解

2013/05/06 PHP

thinkPHP实现签到功能的方法

2017/03/15 PHP

PHP获取数组中单列值的方法

2017/06/10 PHP

Laravel框架自定义验证过程实例分析

2019/02/01 PHP

PHP创建对象的六种方式实例总结

2019/06/27 PHP

php设计模式之代理模式分析【星际争霸游戏案例】

2020/03/23 PHP

基于jQuery捕获超链接事件进行局部刷新代码

2012/05/10 Javascript

jQuery-onload让第一次页面加载时图片是淡入方式显示

2012/05/23 Javascript

ubuntu下安装nodejs以及升级的办法

2015/05/08 NodeJs

详解nodejs 文本操作模块-fs模块（五）

2016/12/23 NodeJs

jQuery表单插件ajaxForm实例详解

2017/01/17 Javascript

jQuery实现节点的追加、替换、删除、复制功能示例

2017/07/11 jQuery

浅谈vue中慎用style的scoped属性

2017/11/28 Javascript

微信小程序基于slider组件动态修改标签透明度的方法示例

2017/12/04 Javascript

vue2.* element tabs tab-pane 动态加载组件操作

2020/07/19 Javascript

Node.JS如何实现JWT原理

2020/09/18 Javascript

vue 计算属性和侦听器的使用小结

2021/01/25 Vue.js

[53:15]2018DOTA2亚洲邀请赛3月29日小组赛A组 LGD VS TNC

2018/03/30 DOTA

python 布尔操作实现代码

2013/03/23 Python

给Python中的MySQLdb模块添加超时功能的教程

2015/05/05 Python

python 换位密码算法的实例详解

2017/07/19 Python

基于python中的TCP及UDP(详解)

2017/11/06 Python

python tkinter实现下载进度条及抖音视频去水印原理

2021/02/07 Python

HTML5 Canvas的常用线条属性值总结

2016/03/17 HTML / CSS

澳大利亚排名第一的在线酒类商店：MyBottleShop

2018/04/26 全球购物

Kathmandu美国网站：新西兰户外运动品牌

2019/03/23 全球购物

《鱼游到了纸上》教学反思

2014/02/20 职场文书

电子专业自荐信

2014/07/01 职场文书

2014教师年度工作总结

2014/11/10 职场文书

苏州园林导游词

2015/02/03 职场文书

如何使用Python对NetCDF数据做空间相关分析

2021/04/21 Python

python实现调用摄像头并拍照发邮箱

2021/04/27 Python

TensorFlow的自动求导原理分析

2021/05/26 Python

DBCA命令行搭建Oracle ADG的流程

2021/06/11 Oracle