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 showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
Move.js入门
Feb 08 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
php实现留言板功能
2017/03/05 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python生成验证码实例
2014/08/21 Python
Python中input和raw_input的一点区别
2014/10/21 Python
python贪吃蛇游戏代码
2020/04/18 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
初一生物教学反思
2014/01/18 职场文书
老公给老婆的保证书
2014/04/28 职场文书
民政工作个人总结
2015/02/28 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书