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程序设计有所帮助。

Javascript 相关文章推荐
自己整理的一个javascript日期处理函数
Oct 16 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
浅谈js中的bind
2019/03/18 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
python实现ip查询示例
2014/03/26 Python
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Python网络编程详解
2017/10/31 Python
Python实现学生成绩管理系统
2020/04/05 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
python实现的生成word文档功能示例
2019/08/23 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
Python numpy数组转置与轴变换
2019/11/15 Python
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
优秀生推荐信范文
2013/11/28 职场文书
铲车司机岗位职责
2014/03/15 职场文书
小学生家长寄语
2014/04/02 职场文书
《学会合作》教学反思
2014/04/12 职场文书
党课培训心得体会
2014/09/02 职场文书
2015年全民创业工作总结
2015/07/23 职场文书