<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. Linux下基于源代码方式安装MySQL 5.6

    MySQL为开源数据库,因此能够基于源代码实现安装.基于源代码安装有很多其它的灵活性. 也就是说我们能够针对自己的硬件平台选用合适的编译器来优化编译后的二进制代码.依据不同的软件平台环境调整相关的编译 ...

  2. c++ THUNK技术

    这里想说的是:代码中的关键点为用指令jmp pFunc跳转到你想要运行的函数pFunc. 指令"jmp xxxx"占5个字节,代码中用了个一字节对齐的结构体struct Thunk ...

  3. C程序设计的抽象思维-算法分析-大多数元素

    [问题] 请编写下面函数 int MajorityElement(int array[],int n); 该函数返回数组array中的多数元素.多数元素是指在占绝对多数(至少51%)的一个值.假设多数 ...

  4. eclipse与github建立版本关联、git使用说明

    1.在eclipse下建一个project :aa 2.打开git bush,进入aa目录下:cd /d/MyWorkspace/aa 3.git init 4.git add -A 5.git co ...

  5. Web前端开发面试题赋答案

    第一部分:用CSS实现布局 让我们一起来做一个页面 首先,我们需要一个布局. 请使用CSS控制3个div,实现如下图的布局. 第二部分:用javascript优化布局 由于我们的用户群喜欢放大看页面 ...

  6. 关于ajax网络请求的封装

    // 封装的ajax网络请求函数// obj 是一个对象function AJAX(obj){ //跨域请求        if (obj.dataType == "jsonp") ...

  7. java对象Integer不能引用传递

    java对象Integer不能引用传递 /** * The value of the <code>Integer</code>. * * @serial */ private ...

  8. 关于在Java代码中写Sql语句需要注意的问题

    最近做程序,时不时需要自己去手动将sql语句直接写入到Java代码中,写入sql语句时,需要注意几个小问题. 先看我之前写的几句简单的sql语句,自以为没有问题,但是编译直接报错. String st ...

  9. 2015版Force Touch Mac Book激活三个手指拖动窗口

    新买的2015版的Mac Book Pro,一切都好,就是原来一直很的很习惯的三个手指拖动窗口的手势,突然找不到地方设置了,很是让我失望了一把,在想苹果怎么会把这么有用的手势去掉了呢.还好有万能的Go ...

  10. IOS添加自定义字体库

    1.将需要的字体库xxx.ttf添加到工程中,注意一定要在copy bundle resources中存在,如果没有添加上去 2.在info.plist 文件中添加 fonts provided by ...