<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>onmousemove</title>

		<style type="text/css">

			#box1{

				width:100px;

				height:100px;

				background-color:red;

				/*开启box1的绝对定位*/

				position:absolute;

			}

		</style>

		<script type="text/javascript">

			/*

			 *使div可以跟随鼠标移动

			 * */

			window.onload = function(){

			//获取box1

				var box1 = document.getElementById("box1");

				//绑定鼠标移动事件

				document.onmousemove = function(event){

					//解决兼容问题

					event = event || window.event;

					//获取滚动滚动的距离。

					//chrome认为滚动条是body。

					//火狐等认为是浏览器的滚动条是html的。

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

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

					console.log(st);

					//获取到鼠标的坐标

					//用于获取鼠标在当前的可见窗口的坐标

					//在IE8中不支持 兼容IE8 则不要使用

					var left = event.clientX;

					var top = event.clientY;

					//设置div的偏移量

					box1.style.left = left+ sl + "px";

					box1.style.top = top+ st +"px";

				}

			}

		</script>

	</head>

	<body style="height:5000px;">

		<div id="box1">

		</div>

	</body>

</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>onmousemove</title>
        <style type="text/css">
            #box1{
                width:100px;
                height:100px;
                background-color:red;
                
                /*开启box1的绝对定位*/
                position:absolute;
            }
        
        </style>
        
        <script type="text/javascript">
            /*
             *使div可以跟随鼠标移动
             * */
            window.onload = function(){
            
            //获取box1
                var box1 = document.getElementById("box1");
                //绑定鼠标移动事件
                document.onmousemove = function(event){
                    //解决兼容问题
                    event = event || window.event;
                    
                    //获取滚动滚动的距离。
                    //chrome认为滚动条是body。
                    //火狐等认为是浏览器的滚动条是html的。
                    var st = document.body.scrollTop || document.documentElement.scrollTop;
                    
                    var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
                    
                    console.log(st);
                    
                    
                    
                    //获取到鼠标的坐标
                    //用于获取鼠标在当前的可见窗口的坐标
                    //在IE8中不支持 兼容IE8 则不要使用
                    var left = event.clientX;
                    var top = event.clientY;
                    
                    //设置div的偏移量
                    box1.style.left = left+ sl + "px";
                    box1.style.top = top+ st +"px";
                }
            }
            
        </script>
        
        
    </head>
    <body style="height:5000px;">
        
        <div id="box1">
            
            
            
        </div>
        
        
    </body>
</html>

html js div随鼠标移动的更多相关文章

  1. 如何用jQuery实现div随鼠标移动而移动（详解）？----2017-05-12

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...

  2. 如何用jQuery实现div随鼠标移动而移动？（详解）----2017-05-12

    重点是弄清楚如何获取鼠标现位置与移动后位置,div现在位置与移动后位置: 用jQuery实现div随鼠标移动而移动,不是鼠标自身的位置!!而是div相对于之前位置的移动 代码如下:(注意看绿色部分的解 ...

  3. JS如何判断鼠标滚轮向上还是向下滚动

    前几天偶然看到某前端群有人在问:JS如何判断鼠标滚轮向上还是向下滚动? 我想了想,有点蒙蔽,心想难道不是用scrollTop来判断吗? 但我不确定,也出于好奇心,于是开始了一番探索 思路:通过even ...

  4. js div及table首行顶部吸附示例

    js div顶部吸附示例,例如这样: 以下为DIV顶部吸附示例:(此示例来自于网络,在此记录与分享!感谢原作者!) 示例1:兼容IE6 <div style="height:300px ...

  5. marquee实现文字移动效果;js+div实现文字无缝移动效果

    1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...

  6. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  8. div跟随鼠标移动

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

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

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

随机推荐

  1. ORA-00600:internal error code,arguments:[keltnfy-idmlnit],[46],[1],[],[],[],[],[]

    如图:在DBCA进行到3%时.报错 由于/etc/hosts与/etc/sysconfig/network不正确应,所以报错 [root@ocm2 ~]# cat /etc/hosts # Do no ...

  2. linux文件系统写过程简析

    linux写入磁盘过程经历VFS ->  页缓存(page cache) -> 具体的文件系统(ext2/3/4.XFS.ReiserFS等) -> Block IO ->设备 ...

  3. javascript之promise

    js语言的执行环境是"单线程",即一次只能执行一个任务,如果有多个任务的话,就需要排队,只有前面的一个任务执行结束了,再执行后面的一个任务.于是异步执行就变得非常重要,异步执行之后 ...

  4. 轻量ORM-SqlRepoEx （十三）最佳实践

    ORM-SqlRepoEx 是 .Net平台下兼容.NET Standard 2.0,一个实现以Lambda表达式转转换标准SQL语句,使用强类型操作数据的轻量级ORM工具,在减少魔法字串同时,通过灵 ...

  5. C#设计模式 —— 单例模式

    嗯,这是本人的第一篇随笔,就从最简单的单例模式开始,一步一步地记录自己的成长. 单例模式是最常见的设计模式之一,在项目代码中几乎随处可见.这个设计模式的目的就是为了保证实例只能存在一个.单例模式往下还 ...

  6. python_frm组件

    一.URL添加 from django.contrib import admin from django.urls import path,re_path from app01 import view ...

  7. PHP-----PHP程序设计基础教程----第三章函数

    3.1 初识函数 3.1.1 函数的定义 语法: function 函数名([参数1,参数2,......]) { 函数体 } (1)function:在声明函数时必须使用的关键字 (2)函数名:创建 ...

  8. CSDN强制登录的解决办法

    这个网站的吃相越来越恶心,最近使用发现他竟然强制登录了,这样的网站我是不可能登录的,要一大堆身份信息,但是,某些时候有需要看一些别人的文章怎么办呢, ​ 似乎节操与便利必须选一个,还好CSDN这样的网 ...

  9. pomelo 的一些监控和维护插件（工具）

    POMELO 提供了非常多的插件,可以方便我们日常对其的一些操作和开发工作,同样的我们也可以自己开发一些定制的插件让其伴随整个POMELO的生命周期运作(这里 不是要介绍如何制作POMELO插件),这 ...

  10. stm32串口中断总结

    串口文件uart.c需要被用到; 串口通信是对GPIO端口引脚的功能复用,因此需要用到gpio.c; 因为中断的产生,因此中断文件也是需要用到的: 中断响应函数需要自己编写: 接收中断:在接收移位寄存 ...