<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进程实时监控 - htop

    htop 是一个 Linux 下的交互式的进程浏览器,top的增强版 htop:                        进入:htop        退出:按q键 常用操作:          ...

  2. StringBuffer和StringBuilder使用方法比較

    StringBuffer是字符串缓冲区,是一个容器. 特点: 1,长度是可变化的. 2,能够字节操作多个数据类型. 3,终于会通过toString方法变成字符串. C create U update ...

  3. Tooltip(提示框)组件

    一．加载方式 //class加载方式 <a href="http://www.ycku.com" title="这是一个提示信息!" class=&quo ...

  4. firefox 不能显示 glyphicons 字体

    折腾了很久才发现是firefox 不能跨域下载相应的字体文件,将bootstrap相应的css文件和字体文件copy到调用的项目里,问题才得以解决.

  5. Hyper-v虚拟机上网

    Windows 8中内置的Hyper-V管理器可以说给许多人带来了惊喜!在Hyper-V管理器强大的同时,也同样面临着设置中一些不可避免的麻烦.有人说,Hyper-V虚拟机联网麻烦,其实,只要掌握了技 ...

  6. HTML、CSS、JS、PHP 的学习顺序~（零基础初学者）

    如果你有耐心坚持一年以上的话, 我会推荐HTML->CSS->JS->PHP的顺序来学习. 1. HTML学习:首先学习HTML,HTML作为标记语言是非常容易学的,把w3schoo ...

  7. winform中获取Properties窗口的值.

    我写这个工具,主要是多次在将自己的代码和别人代码做对比时,不想繁琐地用眼看他设置的和自己设置的哪里不一样. using System; using System.Collections.Generic ...

  8. 浅谈MDX处理空值NULL及格式化结果

    MDX查询结果中往往会含有"NULL"值,这是某维度下对应的的量值不存在导致的,为了让报表呈现更好的效果,在有些情况下,需要将"NULL"的切片值置换成0,这些 ...

  9. SSAS数据集Cube不存在或者尚未处理

    对Microsoft SQL Server(2008) Analysis Services(以下称SSAS) 多维数据集运行多维表达式 (MDX) 查询时,会返回这个错误消息:XXX Cube不存在, ...

  10. C#Socket 案例

    服务器端 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...