<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. Jsp详解

    1Jsp基础 1.1 Jsp引入 Servlet的作用: 用java语言开发动态资源的技术!!! Jsp的作用:用java语言(+html语言)开发动态资源的技术!!! Jsp就是servlet!!! ...

  2. J2EE基础总结（4）——JSP

    什么是JSP       JSP全名为Java Server Pages,中文名叫javaserver页面,其根本是一个简化的Servlet设计,它是由Sun  Microsystems公司倡导.很多 ...

  3. [Polymer] Introduction

    install Polymer and explore creating our first custom element: bower install polymer index.html: < ...

  4. Linux文件的查找

    一直以来,总是记不住文件的查找命令,今天记在博客里,希望可以记得更牢! 1.脚本文件名的查询 which命令(寻找执行文件) #which ifconfig 2.文件名的查找 whereis 命令 # ...

  5. Linux如何创建一个新进程

    2016-03-31 张超<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 Linux如何创建一个新进程 ...

  6. JAVA正则表达式之贪婪、勉强和侵占

    在JAVA正则表达式中量词(quantifiers)允许指定匹配出现的次数,方便起见,当前 Pattern API 规范下,描述了贪婪.勉强和侵占三种量词.首先粗略地看一下,量词X?.X??和X?+都 ...

  7. 从Ueditor跨域上传，总结的一次跨域上传的爬坑经历

    项目内其中一个管理后台需要发布文章,需要一个富文本编辑器,经过一番选择后,最终选择了百度的Ueditor. 由于上传的文件是上传到另一台专门存放图片等静态资源的服务器上面的,所以就涉及到了跨域上传. ...

  8. VS 的winform中生成release模式

    我试过,直接在项目的"Properties"中,修改"Build"标签的"Configuration"还不行.因为之前将不常用的工具栏隐藏了 ...

  9. Intent 能传递的数据类型

    1. Serializable,将对象序列化成二进制数据传递 2. charsequence: 主要用来传递String,char等 3. parcelable: 这个android提供的一种新的类型 ...

  10. TCP/IP 要点备忘

    1. 3次握手/4次挥手过程,以及状态变化: 2. RTT,TTL,TOS(8位服务类型,最小延时.最大吞吐.最高可用.最小费用). 3. TimeWait(2msl)状态,防止最后一个ack丢失 4 ...