1、目标是实现div跟随鼠标而移动,分三种情况进行实现

a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能

第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法。

1)获取鼠标的坐标,进行给div坐标赋值,实现如下:

var left = event.clientX;
var top = event.clientY;
box1.style.left = left + "px";
box1.style.top = top +"px";

第二种方式,假如body的高度大于可见高度,则会出现滚动条,clientXY获取的是可见的大小,则多余的部分则无法实现移动,则需要使用下面的方式实现

但是这种方式不兼容IE8,所以如果要兼容IE8,则不能使用。pageX是获取整个页面的大小

var left = event.pageX;
var top = event.pageY;

第三种方式是什么都可以兼容的,涵盖上面两种方式的可行度,就是用可见窗口的加上滚动条的高度即可

var st = document.body.scrollTop || document.documentElement.scrollTop;
var left = event.clientX;
var top = event.clientY;
box1.style.left = left + "px";
box1.style.top = top + st+"px";

注,left轴也一样,我这里只是实现了y轴

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

  1. 一组div跟随鼠标移动,反应鼠标轨迹

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

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

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

  3. javascript div跟随鼠标移动

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

  4. 鼠标拖动div,div跟随鼠标移动效果

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

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

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

  6. jquery对div元素进行鼠标移动(稍稍修改下可以实现div跟随鼠标)

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

  7. 【案例】DIV随鼠标移动而移动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 一款基于TweenMax跟随鼠标单击移动的div

    今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  9. html页面设置一个跟随鼠标移动的DIV(jQuery实现)

    说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...

随机推荐

  1. idea创建Scala入门HelloWorld

    Scala开发环境的搭建 首先到Scala官网下载Scala网址为 https://www.scala-lang.org/download/ 找到下图所示位置:选择相对应的版本的Scala进行下载,这 ...

  2. MySQL - CentOS 下 MySQL 5.6 安装

    1. 概述 最近没啥东西可写, 随便写点 mysql 5.6 的安装 去年写的 装上去过 三次以上 2. 准备 系统 CentOS 7.4 3. 安装 1. 直接安装 # mysql服务端: mysq ...

  3. 自己写的一些Excel及WordVBA函数[原创]

    1.将Excel当前工作表另存至桌面 Excel中有时一个工作簿中工作表特别多,需要快速单独存取其中一个,可用以下代码快速存至桌面 Sub 另存工作表到桌面() Dim sh As Worksheet ...

  4. Activemq首次运行报错 “找不到或无法加载主类”

    首次运行Program Files\apache-activemq-5.10.0\bin目录下的activemq.bat文件,报错信息如下: 找不到或无法加载主类 Files\apache-activ ...

  5. 20155302 2016-2017-2 《Java程序设计》 第1周学习总结

    20155302 2016-2017-2 <Java程序设计> 第1周学习总结 教材学习内容总结 浏览全书提出问题 chapter1:怎么保证现在系统在用最高版本的JRE呢?在哪里查看及升 ...

  6. 2017-2018-2 《网络对抗技术》 20155322 第二周 Exp1 PC平台逆向破解(5)M

    #2017-2018-2 <网络对抗技术> 20155322 第二周 Exp1 PC平台逆向破解(5)M [博客目录] 1-实践目标 1.1-实践介绍 1.2-实践内容 1.3-实践要求 ...

  7. 20145226夏艺华 《Java程序设计》实验报告一

    实验一 Java开发环境的熟悉(Linux + IDEA) 实验内容 使用JDK编译.运行简单的Java程序: 使用Eclipse 编辑.编译.运行.调试Java程序. 实验步骤 (一)命令行下Jav ...

  8. LVS入门篇(二)之LVS基础

    1. LVS介绍 LVS是Linux虚拟服务器(LinuxVirtualServers),使用负载均衡技术将多台服务器组成一个虚拟服务器.它为适应快速增长的网络访问需求提供了一个负载能力易于扩展,而价 ...

  9. vue 与原生app的对接交互(混合开发)

    小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我最近就是在坐这个,踩了一些坑,拿出来给大家分享下. 0.通过url传输数据:(一般是在入 ...

  10. hive 数据导入

    Hive的几种常见的数据导入方式这里介绍四种:(1).从本地文件系统中导入数据到Hive表:(2).从HDFS上导入数据到Hive表:(3).从别的表中查询出相应的数据并导入到Hive表中:(4).在 ...