<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>鼠标控制DIV移动</title>

        <script type="text/javascript">

              var _IsMousedown = 0;

              var _ClickLeft = 0;

              var _ClickTop = 0;

            function moveInit(evt) {

              _IsMousedown = 1;

              var obj = getObjById('moveDiv');

              _ClickLeft = evt.clientX-obj.offsetLeft;

              _ClickTop = evt.clientY-obj.offsetTop;

            }

            function startMove(evt) {

              if(_IsMousedown == 0){

                  return;

              }

              var obj = getObjById('moveDiv');

              obj.style.left = evt.clientX - _ClickLeft;

              obj.style.top = evt.clientY - _ClickTop;

            }

            function stopMove() {

              _IsMousedown = 0;

            }

            function getObjById(id) {

                return document.getElementById(id);

            }

        </script>

        <style type="text/css" rel="stylesheet">

            #movediv {

                width: 100px;

                height: 100px;

                position: absolute;

                border: 1px solid #000;

                background: #EAEAEA;

            }

        </style>

    </head>

    <body>

        <div id="moveDiv" style="left:20px;top:20px;"

        onmousedown="moveInit(event);"

        onmousemove="startMove(event)"

        onmouseup="stopMove()"

        onmouseout="stopMove()">

        </div>

    </body>

</html>

html--鼠标控制DIV移动的更多相关文章

  1. 控制DIV占满屏幕

    网上找了很多帖子,希望是CSS控制的,但是在bootstrap环境下, 控制方式上有点问题.达不到想要的效果. 项目中需要实现的效果: DIV区域占满当前窗口的高度.且在ctrl+鼠标滚轮调整窗口大小 ...

  2. THREE.js代码备份——线框cube、按键、鼠标控制

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...

  3. 第一课 1) 控制div属性 总结

    点击按钮变换属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. JS/jquery实现鼠标控制页面元素显隐

    最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...

  5. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  6. THREE.js代码备份——webgl - geometry - dynamic(模拟海浪，通过时间（毫秒）来控制平面点的运动模拟海浪，鼠标控制写在另外的js中)

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>three.js webg ...

  7. jQuery---鼠标滚轮控制div横向滚动条左右移动

    HTML <div class="table-responsive"> <div class="fhtable" style="wi ...

  8. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

  9. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. C语言--对数组地址的解析

    在C编程中,我们进程会用到数组,这看起来很简单,因为,数组就是存储相同类型元素的集合嘛,不过,当你还没考虑到数组的地址问题时,一切都是简单的,如果你接触了数组中的地址概念,也许你会改变你的想法. 下面 ...

  2. @IBDesignable和@IBInspectable

    近期一直在看苹果公司提供的两本swift官方教程电子书,一部是<The Swift Programming Language>,还有一部是<Using Swift With Coco ...

  3. [React] React Router: setRouteWillLeaveHook

    setRouteWillLeaveHook provides a method for us to intercept a route change before leaving the curren ...

  4. [iOS] App引导页的简单实现 (Swift 2)

    转载请注明出处:http://www.jianshu.com/p/024dd2d6e6e6# 已更新至 Xcode7.2.Swift2.1 在第一次打开App或者App更新后通常用引导页来展示产品特性 ...

  5. 【ThinkingInC++】64、重载new和delete，来模仿内存的分配

    /** * 书本:[ThinkingInC++] * 功能:重载new和delete.来模仿内存的分配 * 时间:2014年10月5日14:30:11 * 作者:cutter_point */ #in ...

  6. C++11 : 外部模板（Extern Template）

    在C++98/03语言标准中,对于源代码中出现的每一处模板实例化,编译器都需要去做实例化的工作:而在链接时,链接器还需要移除重复的实例化代码.显然,让编译器每次都去进行重复的实例化工作显然是不必要的, ...

  7. Java学习笔记——JDBC读取properties属性文件

    Java 中的 properties 文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件. 文件的内容是格式是"键=值"(key-valu ...

  8. Hibernate简单的基础理论

    和Hibernate有关的概念,是掌握Hibernate必须了解的知识.就个人经验来说,可以在了解如何简单开发Hibernate之后,再来学习这些概念,这样可以有个比较清楚的认识.Hibernate是 ...

  9. 《第一行代码》学习笔记34－服务Service（1）

    1.服务是Android中实现程序后台运行的解决方案,适用于执行不需要和用户交互而且要长期运行的任务. 2.服务的运行不依赖于任何用户界面,或切到后台,或用户打开了另外一个应用程序,服务能够保持正常运 ...

  10. Oracle 如何让别人能够连接到你的数据库

    Oracle 初步 --Oracle的一些关键字 i和g只是版本的代号,指oracle运用的技术i代表Internet就是互联网技术g代表grid就是网格技术现在出的最新版是c就是cloud也就是云技 ...