<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. ASP.net中DateTime获取当前系统时间的大全

    在c# / ASP.net中我们可以通过使用DataTime这个类来获取当前的时间.通过调用类中的各种方法我们可以获取不同的时间:如:日期(2008-09-04).时间(12:12:12).日期+时间 ...

  2. [原创作品] web项目构建(一)

    今天开始,将推出web项目构建教程,与<javascript精髓整理篇>一并更新.敬请关注. 这篇作为这一系列开头,主要讲述web项目的构建技术大全.在众多人看来,web前端开发无非就是写 ...

  3. 【蓝桥杯】PREV-5 错误票据

    题目链接:gpid=T28">http://lx.lanqiao.org/problem.page? gpid=T28   历届试题 错误票据   时间限制:1.0s   内存限制:2 ...

  4. 黑马程序员_<<泛型>>

    --------------------ASP.Net+Android+IOS开发..Net培训.期待与您交流! -------------------- 1.     泛型 1.概述 泛型是为了解决 ...

  5. Oracle11g新特性之动态变量窥视

    1. 11g之前的绑定变量窥视     我们都知道,为了可以让SQL语句共享运行计划,oracle始终都是强调在进行应用系统的设计时,必须使用绑定变量,也就是用一个变量来取代原来出如今SQL语句里的字 ...

  6. mysql 建立加密连接

    加密连接可提高数据的安全性,但会降低性能.要进行加密连接,必须满足以下要求: user权限表里要有相关的SSL数据列.如果安装的MySQL服务器是4.0.0版的,user权限表已包含相关的SSL数据列 ...

  7. linux 下文件的比较

    1.cmp命令,比较两个文件是否相同 比较文件test1和test2,如果这两个文件完全相同,则无任何输出,否则,输出第一处不同所在的字节以及行号,然后忽略后面的不同之处,退出命令的执行. [root ...

  8. Ganglia 监控Hadoop

    Ganglia监控Hadoop集群的安装部署 一. 安装环境 Ubuntu server 12.04 安装gmetad的机器:192.168.52.105 安装gmond的机 器:192.168.52 ...

  9. C#多态联系之虚方法

    class Class1 { static void Main(string[] args) { YuanGong yg = new YuanGong(); JingLi jl = new JingL ...

  10. Css 应用一

    Placeholder使用 CSS3里有相应的通用的对Placeholder提示信息美化的方法.你可以设置提示信息文字的颜色,透明度,背景色等. 为了最大化的兼容所有浏览器,给CSS里的placeho ...