<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            var div1 = document.getElementById('div1');

            document.onmousemove = function (ev) {

                //IE支持event，firefox不支持

                var oEvent = ev || event;

                //

                var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

                div1.style.top = oEvent.clientY + scrollTop + 'px'; //Y

                div1.style.left = oEvent.clientX + scrollLeft + 'px';//X

            };

        };

    </script>

</head>

<body>

    <div id="div1" style="width: 10px; height: 10px; background-color: blue; position: absolute;"></div>

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

</body>

</html>

javascript div跟随鼠标移动的更多相关文章

  1. div跟随鼠标移动

    1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...

  2. javascript元素跟随鼠标在指定区域运动

    元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <h ...

  3. 一组div跟随鼠标移动，反应鼠标轨迹

    <!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...

  4. javascript 一串DIV跟随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 完整的html+css+javascript实现跟随鼠标移动显示选中效果

    1,显示效果: 2,html结构 <div class="process_list-lpu"> <div class="process_line&quo ...

  6. javascript创建跟随鼠标好玩的东西

    不说话,直接上代码. css: #createGoDivBox{ display: none; } #createGoDivBox div{ background-color: #00A6C2; po ...

  7. 鼠标拖动div，div跟随鼠标移动效果

    <div id="boxDiv" style='width:20px;height:20px;position:absolute;background:red;'>   ...

  8. js 实现div跟随鼠标移动

    今天看到了一个自己可以随心所欲的拖到div到页面的任意位置.感觉挺好的,就心血来潮的查询了一下,看看网友做的 代码如下: <script>function doit(){ var obj ...

  9. jquery对div元素进行鼠标移动（稍稍修改下可以实现div跟随鼠标）

    /* 网上找了资料都是对于event.clientX和offset().left进行了计算,但是去掉了这个计算方式,直接使用当前坐标也一样,效果都一样不太好 strHeader:标题 jquery定位 ...

随机推荐

  1. vmware产品

    https://my.vmware.com/cn/group/vmware/info?slug=datacenter_cloud_infrastructure/vmware_vsphere/5_5#o ...

  2. 一步一步制作yaffs/yaffs2根文件系统(七)---真挚地道歉以及纠正前边出现的错误！

    接上一节http://blog.csdn.net/mybelief321/article/details/10040939 说实话,我当时写这个系列的博文的时候,感觉对BusyBox算是有点了解,直到 ...

  3. SourceTree的基本使用

    1. SourceTree是什么 拥有可视化界面的项目版本控制软件,适用于git项目管理 window.mac可用 2. 获取项目代码 1. 点击克隆/新建 2. 在弹出框中输入项目地址,http或者 ...

  4. Qt 国际化之二：多国语界面动态切换的实现

    第一步在你的pro里面加入 TRANSLATIONS = myexec_zh.ts (根据对应的ts文件修改)第二步用lupdate 操作pro 将要翻译的提取到ts文件 命令是 lupdate my ...

  5. Zookeeper3.4.6部署伪分布集群（Apache）

    1.下载Zookeeper http://mirrors.cnnic.cn/apache/zookeeper/zookeeper-3.4.6/ 2.创建/usr/app/zookeeper目录,并切换 ...

  6. Base64工具类

    public final class AbBase64 { /** The Constant base64EncodeChars. */ private static final char[] bas ...

  7. 使用Android Studio时so文件打包不到APK中

    1,需要在build中添加如下配置,这是必备的 Android {   sourceSets {       main {           jniLibs.srcDirs = ['libs']   ...

  8. Spring各种传播特性源码实现的概览

    这几天都在分析Spring的源码实现,看到事务管理的部分 我们知道事务的传播特性有下面几种,我标黄的就是最常用的3中传播特性, Sping在发生事务嵌套的时候,会依据内层事务的传播特性,来决定内层是事 ...

  9. [字符串] AppMessage--字符串返回帮助类 （转载）

    点击下载 AppMessage.rar 这个类是关于AppMessage的帮助类,主要是格式化返回字符串的里面会有很多的提供字符的格式以及预设置内容,大家可以直接使用的看下面代码吧 /// <s ...

  10. wordpress 后台显示空白现象

    简单的说两句,出现此种现象的因素可能在于主题或者插件再或者是因为(恶意)插件(误更改)更改了某个重要的文件出现错误.本次我遇到的是插件的错误,具体是什么错误,我也没有去深究,重要的是结果! 使用排查的 ...