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

Windows Live的@live.com域名注册漏洞利用代码

Dec 27 Javascript

在Iframe中获取父窗口中表单的值(示例代码)

Nov 22 Javascript

JavaScript输入邮箱自动提示实例代码

Jan 13 Javascript

javascript实现移动端上的触屏拖拽功能

Mar 04 Javascript

JS制作适用于手机和电脑的通知信息效果

Oct 28 Javascript

JavaScript中使用import 和require打包后实现原理分析

Mar 07 Javascript

vue的toast弹窗组件实例详解

May 14 Javascript

详解如何在你的Vue项目配置vux

Jun 04 Javascript

解决vue中修改export default中脚本报一大堆错的问题

Aug 27 Javascript

vue 实现小程序或商品秒杀倒计时

Apr 14 Javascript

实现elementUI表单的全局验证的方法步骤

Apr 29 Javascript

详解Node.js使用token进行认证的简单示例

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

肝肠寸断了解下!盘点史上最伤心的十大动漫

2020/03/04 日漫

PHP4实际应用经验篇(8)

2006/10/09 PHP

解析Linux下Varnish缓存的配置优化

2013/06/20 PHP

PHP 面向对象程序设计（oop）学习笔记 (四) - 异常处理类Exception

2014/06/12 PHP

PHP 双链表(SplDoublyLinkedList)简介和使用实例

2015/05/12 PHP

WordPress中使主题支持小工具以及添加插件启用函数

2015/12/22 PHP

IE浏览器PNG图片透明效果代码

2008/09/02 Javascript

jQuery的attr与prop使用介绍

2013/10/10 Javascript

Nodejs学习笔记之Stream模块

2015/01/13 NodeJs

浅谈angularjs $http提交数据探索

2017/01/20 Javascript

详解vue-cli开发环境跨域问题解决方案

2017/06/06 Javascript

微信小程序蓝牙的实现实例代码

2017/06/27 Javascript

jsonp跨域及实现百度首页联想功能的方法

2018/08/30 Javascript

vue 项目地址去掉 #的方法

2018/10/20 Javascript

9种方法优化jQuery代码详解

2020/02/04 jQuery

Python的Flask框架中@app.route的用法教程

2015/03/31 Python

python机器学习之随机森林（七）

2018/03/26 Python

python实现根据指定字符截取对应的行的内容方法

2018/10/23 Python

Python从Excel中读取日期一列的方法

2018/11/28 Python

Linux下Pycharm、Anaconda环境配置及使用踩坑

2018/12/19 Python

Python基础知识点初识Python.md

2019/05/14 Python

windows下安装Python虚拟环境virtualenvwrapper-win

2019/06/14 Python

python 进程的几种创建方式详解

2019/08/29 Python

python同步两个文件夹下的内容

2019/08/29 Python

Python socket模块方法实现详解

2019/11/05 Python

python安装和pycharm环境搭建设置方法

2020/05/27 Python

一篇文章教你用python画动态爱心表白

2020/11/22 Python

Django如何继承AbstractUser扩展字段

2020/11/27 Python

如何用 Python 制作一个迷宫游戏

2021/02/25 Python

CSS3实现多背景展示效果通过CSS3定位多张背景

2014/08/10 HTML / CSS

实例讲解使用HTML5 Canvas绘制阴影效果的方法

2016/03/25 HTML / CSS

Lulu Guinness露露·吉尼斯官网：红唇包

2019/02/03 全球购物

幼儿园教师培训方案

2014/02/04 职场文书

竞选班干部演讲稿400字

2014/08/20 职场文书

在HTML5 localStorage中存储对象的示例代码

2021/04/21 Javascript

Python实现GIF动图以及视频卡通化详解

2021/12/06 Python