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. 基于opencv和qt的人脸检测小系统

    摘要:利用opencv读取视频.图片并检测人脸,利用QT显示窗口,功能选择等 环境:Ubuntu18.04.OpenCV3.4.0.QT5.10.1 效果图: 代码如下(比较简单没什么注释): mai ...

  2. 内置函数--eval

    eval参数是一个字符串, 可以把这个字符串当成表达式来求值, 比如'x+2'就是一个表达式字符串>>> x = 2>>> print (eval('x+2'))2 ...

  3. 【Mac】gem install 出错 You don't have write permissions for the /Library/Ruby/Gems

    问题描述 RedisDump 是一个用于 Redis 数据导人/导出的工具,是基于 Ruby 实现的,需要先安装 Ruby.但因为 Mac 自带有 Ruby 所以我直接用gem install red ...

  4. Node.js 引用 gm 包错误 Error: Could not execute GraphicsMagick/ImageMagick

    今天在学习前后台图像剪切时,下载了有图片剪切瑞士军刀之称的 GraphicsMagick. 给 gm.exe 配置了环境变量,在 npm 下好了 gm 的模块,但是运行却出现了错误. 错误如图: [E ...

  5. FlexPaper 里的pdf2json.exe 下载地址

    在使用FlexPaper 做在线阅读,需要使用到pdf2json.exe,将PDF转成JSON或者XML格式,网上很少下载的,现在提供一个下载的地址 http://pan.baidu.com/s/1i ...

  6. 20155226 实验三 敏捷开发与XP实践 实验报告

    20155226 实验三 敏捷开发与XP实践 实验报告 实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim ...

  7. 20155319 《Java程序设计》实验五(网络编程与安全)实验报告

    20155319 <Java程序设计>实验五(网络编程与安全)实验报告 一.实验内容及步骤 (一) 两人一组结对编程 参考http://www.cnblogs.com/rocedu/p/6 ...

  8. 20155321 2016-2017-2 《Java程序设计》第二周学习总结

    教材学习内容总结 这星期主要学习了Java语言中的各种运算符以及基本的一些语句,除了个别地方之外大部分和以往C语言学的东西比较相似,在比较中看教材学习比较容易掌握第三章的内容,课后练习的难度也不是很大 ...

  9. 【MYSQL经验】MYSQL经验总结

    1.决定是否添加一个新的所以并部署它需要考虑很多因素

  10. 查看Linux系统版本的命令

    1.lsb_release -a,即可列出所有版本信息: [root@S-CentOS ~]# lsb_release -a LSB Version: :base-4.0-amd64:base-4.0 ...