<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. Android ListView 滚动的N种方法

    Android 里面让ListView滚动有N种方法,这儿列举三种: 我的需求是通过按键让Listview滚动起来,当然这些按键不是通过Android标识接口传输过来的,所以不能通过监听按键事件来实现 ...

  2. Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器

    1.概述 本篇博客的产生呢,是因为,群里的哥们暖暖给我发了个效果图,然后问我该如何实现顶部ViewPager指示器的字体变色,该效果图是这样的: 大概是今天头条的app,神奇的地方就在于,切换View ...

  3. C#位移运算符

    代码如下: /// <summary> /// 位移运算符"<<"左位移运算符,">>"右位移运算符 /// 在进行位移运算 ...

  4. NET下三种缓存机制（Winform里面的缓存使用 ）

    原文(http://www.cnblogs.com/wuhuacong/p/3526335.html)非常感谢伍华聪作者的分享! 缓存在很多情况下需要用到,合理利用缓存可以一方面可以提高程序的响应速度 ...

  5. mac os 10.10下安装android studio问题：android studio was unable to find a valid jvm

    友情提示:小编在做到这一步前,已经确定jdk和环境变量已经安装并配置无误,关于怎么检查java环境变量请自行百度. 原因分析:android studio安装包下的info.plist配置文件中有个关 ...

  6. 使用UISegementControl实现简易汤姆猫程序

    // // TomViewController.m #import "TomViewController.h" #import <AVFoundation/AVFoundat ...

  7. [转]Swift编程风格指南

    语言 使用美式英语拼写以匹配苹果公司的API 优选: var color = "red" 不建议使用: var colour = "red" 间隔 使用2个空格 ...

  8. 在OC中调用Swift类中定义delegate出现:Property 'delegate' not found on object of type ...

    找了许久没找到答案, 在下面的链接中, 我解决了这个问题: http://stackoverflow.com/questions/26366082/cannot-access-property-of- ...

  9. Mongodb基本操作之.net

    1.下载官方for C#驱动 2.导入2个dll文件 3.连接字符串 <add key="MongoConn" value="mongodb://127.0.0.1 ...

  10. 自己手动绿色化MyEclipse

    绿化过程因每个人的文件存放路径不同而不同 首先打开你解压的MyEclipse文件,或者以前安装的MyEclipse重装系统后不能用,打开到这里:记住路径,比如我的是:D:\MyEclipse 我们打开 ...