编程 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 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持

Apr 07 Javascript

两个select之间option的互相添加操作(jquery实现)

Nov 12 Javascript

js网页侧边随页面滚动广告效果实现

Apr 14 Javascript

jQuery操作Select选择的Text和Value(获取/设置/添加/删除)

Mar 06 Javascript

Javascript弹出窗口的各种方法总结

Nov 11 Javascript

详解JavaScript函数

Dec 01 Javascript

jQuery动态添加及删除表单上传元素的方法(附demo源码下载)

Jan 15 Javascript

Javascript技术栈中的四种依赖注入详解

Feb 23 Javascript

Node.js的MongoDB驱动Mongoose基本使用教程

Mar 01 Javascript

jQuery实现自动调用和触发某个事件的方法

Nov 18 Javascript

JS中的作用域链

Mar 01 Javascript

angular-tree-component的使用详解

Jul 30 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实现给图片加灰色半透明效果的方法

2014/10/20 PHP

PHP集成百度Ueditor 1.4.3

2014/11/23 PHP

php 替换文章中的图片路径,下载图片到本地服务器的方法

2018/02/06 PHP

PHP7.0连接DB操作实例分析【基于mysqli】

2019/09/26 PHP

php7 list()、session及其他模块的修改实例分析

2020/05/25 PHP

JS 页面计时器示例代码

2013/10/28 Javascript

使用Javascript实现选择下拉菜单互移并排序

2016/02/23 Javascript

浅谈时钟的生成(js手写简洁代码)

2016/08/20 Javascript

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

2017/02/19 Javascript

Bootstrap面板（Panels）的简单实现代码

2017/03/17 Javascript

vue.js简单配置axios的方法详解

2017/12/13 Javascript

JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】

2018/03/15 Javascript

Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

2018/05/04 Javascript

JS关于刷新页面的相关总结

2018/05/09 Javascript

用Cordova打包Vue项目的方法步骤

2019/02/02 Javascript

jQuery.parseJSON()函数详解

2019/02/28 jQuery

微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

2019/05/03 Javascript

M2实现Nodejs项目自动部署的方法步骤

2019/05/05 NodeJs

基于vue 实现表单中password输入的显示与隐藏功能

2019/07/19 Javascript

Django框架下在URLconf中指定视图缓存的方法

2015/07/23 Python

python中实现迭代器（iterator）的方法示例

2017/01/19 Python

python3.6 +tkinter GUI编程实现界面化的文本处理工具(推荐)

2017/12/20 Python

Python中shapefile转换geojson的示例

2019/01/03 Python

python多线程下信号处理程序示例

2019/05/31 Python

python禁用键鼠与提权代码实例

2019/08/16 Python

pandas中read_csv的缺失值处理方式

2019/12/19 Python

python3安装OCR识别库tesserocr过程图解

2020/04/02 Python

利用Python的folium包绘制城市道路图的实现示例

2020/08/24 Python

Crabtree & Evelyn英国官网：瑰珀翠护手霜、香水、沐浴和身体护理

2018/04/26 全球购物

英国女性运动服品牌：Sweaty Betty

2018/11/08 全球购物

linux面试题参考答案（10）

2013/11/04 面试题

教师应聘个人求职信

2013/12/10 职场文书

酒店办公室文员岗位职责

2013/12/18 职场文书

基层党组织公开承诺书

2014/03/28 职场文书

先进单位事迹材料

2014/12/25 职场文书

用position:sticky完美解决小程序吸顶问题的实现方法

2021/04/24 HTML / CSS