<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. 转载: C#: Left outer joins with LINQ

    I always considered Left Outer Join in LINQ to be complex until today when I had to use it in my app ...

  2. Hadoop 类Grep源代码注释

    /** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agree ...

  3. 使用awrextr.sql导出awr原始数据

    1.AWR原始数据与AWR报告的差别 AWR原始数据: 是oracle数据库mmon进程定期将统计量从内存转储至磁盘,并以结构化的形式存入若干张表组成自己主动工作负荷存储仓库(AutomaticWor ...

  4. apache ab工具对网站进行压力测试

    Apache -- ab工具主要测试网站的(并发性能) 这个工具非常的强大. 基本语法 :   cmd>ab.exe –n 请求总次数  -c 并发数 请求页面的url     进入到ab.ex ...

  5. js中关于一个数组中最大、最小值以及它们的下标的输出的一种解决办法

    今天在学习js中的数组时,遇到的输出一个数组中最大.最小值以及它们的下表,以下是自己的解决方法! <script type="text/javascript"> var ...

  6. POJ 1064 Cable master（二分查找+精度）（神坑题）

    POJ 1064 Cable master 一开始把 int C(double x) 里面写成了  int C(int x) ,莫名奇妙竟然过了样例,交了以后直接就wa. 后来发现又把二分查找的判断条 ...

  7. java学习笔记 (7) —— 实现简单的上传处理

    1.下载apache 的 commons-fileupload.jar 包及 commons-io.jar 2.引入到lib 文件夹下 3.新建uploadApache.jsp <%@ page ...

  8. document 写法

    # UfsProgressBar ## Component InfoA progress bar component of specified progress. ## Usage```<ufs ...

  9. 遗传算法matlab实现

    我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang 以下运用MATLAB实现遗传算法:   clc clear   %参数 a = 0 ; b = 4 ; e ...

  10. mongoDB初探

    最近在努力学习node方面的东西,看别人的资料里提到最多用到的数据库还是mongoDB,早打算下载下来试一下,由于电脑新配置,网络也由于住的地方现在上不了网暂时用的手机4G网络在凑合,这里面也踩到了不 ...