<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. 【架构师之路】依赖注入原理---IoC框架

    1 IoC理论的背景    我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑.  图1:软件系统中耦合的对象 如果我们 ...

  2. iOS 蓝牙4.0开发

    背景: 1.iOS的蓝牙不能用来传输文件.2.iOS与iOS设备之间进行数据通信,使用gameKit.framework3.iOS与其他非iOS设备进行数据通信,使用coreBluetooth.fra ...

  3. Vss服务端用户存在,但客户端登陆不进去

    打开客户端Vss提示“Cannot find SS.INI file for user userName”,这个错误是找不到用户userName的SS.INI文件. 解决办法 在服务器上找到Vss共享 ...

  4. 前端笔试题目总结——应用JavaScript函数递归打印数组到HTML页面上

    数组如下: var item=[{ name:'Tom', age:70, child:[{ name:'Jerry', age:50, child:[{ name:'William', age:20 ...

  5. GridView 和 Access数据库实现数据绑定(asp.net)

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="主页.aspx.cs ...

  6. Asp.net - The type or namespace name 'App_Code' does not exist in the namespace 'xxx' (are you missing an assembly reference?)

    我在 项目 下面创建一个 App_Code的文件夹,然后在其下创建自定义的类,但是当我在该项目下别的地方使用时报错: The type or namespace name 'App_Code' doe ...

  7. HTML 学习网站

    http://www.w3school.com.cn/tiy/t.asp?f=html_intro

  8. 网络流初步——增广路算法（EK）模板

    #include <iostream> #include <queue> #include<string.h> using namespace std; #defi ...

  9. [Mugeda HTML5技术教程之10]发布内容

    动画作品制作好后,就要拿来使用,怎么发布到想要的位置也是动画制作者比较关心的问题.这一节,我们讲述怎样将制作好的动画内容发布到想要的地方.对制作好的内容,可能的使用场景主要有以下三种:直接导出:发布到 ...

  10. Css3小技术

    圆角border-radius border-radius:length *注: 这是一个缩写,相当于四个角设置同样的值,用px或者百分比都可以,想要成为圆形,就用50%,你也可以单独设置每个角,语法 ...