<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. PHP magic_quotes_gpc

    大多的PHP程序,都有这样的逻辑: 如果发现php.ini配置为不给GPC变量自动添加转义斜线,则PHP自动为GPC添加转义斜线 但是事实上,这是错误的,因为它改变了GPC变量原来的值． 有这个遗留习 ...

  2. Qt读取JSON和XML数据

    QJSON JSON(JavaScript Object Notation)是一个轻量级的数据交换格式; 可以将数据以name/value的形式任意组合; QJson 是一个基于Qt的库, 将JSON ...

  3. java jodd轻量级开发框架

    http://git.oschina.net/huangyong/jodd_demo/blob/master/jodd-example/src/main/java/jodd/example/servi ...

  4. 通过 yum update 将系统从CentOS 6.2 升级到 CentOS 6.6 及升级过程中的简单排错

    本文说明 本文写于2014年的WP中,后WP停止维护,今天翻到此记录整理下,记录于此,方便日后查看. 话说那时候写博客真是认真啊~哈哈~ 升级前的系统信息 [root@thatsit ~]# unam ...

  5. css中表格的table-layout属性特殊用法

    table-layout: 属性1:auto,使用它,表格的大小由单元格里的内用决定,即td的宽高由内容的多少而变化. 属性2:fixed,如果内容是中文的话td的宽高固定,宽高有内容决定,没有限制. ...

  6. inline-block容器的高度撑开位置

    block的高度是从最上面撑开的 那么inline-block呢? 直接上代码 <!doctype html> <html> <head> <meta cha ...

  7. ResourceDictionary 和 XAML 资源引用

    XAML 定义应用的 UI,并且 XAML 也可以定义 XAML 中的资源.资源通常是对你希望多次使用的某些对象的定义.你要为 XAML 资源定义一个键,以供将来引用,该键的作用类似于资源的名称.你可 ...

  8. js基本类型

    1.undefined 1)var a;//没有赋值的时候就是undefined 2)undefined派生自null,alert(undefined==null)//true 虽然这上条语句是一样, ...

  9. vagrant 配置文件简析

    #自定义box名字 config.vm.box = "website" #以ip192.168.33.10访问 config.vm.network "private_ne ...

  10. Javascript 判断浏览器是否为IE的最短方法

    作者:idd.chiang 发布时间:April 29, 2010 分类:Javascript/AS 在网上有幸看到夷人通过IE与非IE浏览器对垂直制表符支持特性搞出的一段简短的条件: var ie ...