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. Python学习 :面向对象 -- 成员修饰符

    成员修饰符 两种成员 - 公有成员 - 私有成员, __字段名 - 无法直接访问,只能通过内部方法来间接访问私有成员 简例:公有成员与私有成员  class Info: country = '中国' ...

  2. 【Mac】安装 Homebrew 出错 Failed during: git fetch origin master:refs/remotes/origin/master --tags --force

    今天在 Mac 装 Homebrew 遇到了一个问题,在网上找了大量解决方案,做个总结. Mac 版本 High Sierra 10.13.6. 问题描述 在 Mac 终端输入了 Homebrew 官 ...

  3. JavaScript中使用比较多的两种创建对象的方式

    1.使用组合模式创建对象 原型模式创建对象适合封装方法,构造方法模式创建对象适合封装属性 组合方法缺点:将构造方法和原型分开写 <script type="text/javascrip ...

  4. 用gogs搭建git服务器

    Gogs 是一款极易搭建的自助 Git 服务. Gogs 的目标是打造一个最简单.最快速和最轻松的方式搭建自助 Git 服务.使用 Go 语言开发使得 Gogs 能够通过独立的二进制分发,并且支持 G ...

  5. 基于MATLAB的多项式数据拟合方法研究-毕业论文

    摘要:本论文先介绍了多项式数据拟合的相关背景,以及对整个课题做了一个完整的认识.接下来对拟合模型,多项式数学原理进行了详细的讲解,通过对文献的阅读以及自己的知识积累对原理有了一个系统的认识.介绍多项式 ...

  6. 20155211 2016-2017-2 《Java程序设计》第2周学习总结

    20155211 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 通过对教材的阅读,我理解到Java中对于整数,浮点数等类型的定义与c语言基本相同. 对字面常 ...

  7. 20155217 2016-2017-2 《Java程序设计》第3周学习总结

    20155217 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 要产生对象必须先定义类,类定义时使用class关键词,建立实例要使用new关键词. ...

  8. WPF Color、String、Brush转换

    原文:WPF Color.String.Brush转换 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/detai ...

  9. 【LG5022】[NOIP2018]旅行

    [LG5022][NOIP2018]旅行 题面 洛谷 题解 首先考虑一棵树的部分分怎么打 直接从根节点开始\(dfs\),依次选择编号最小的儿子即可 而此题是一个基环树 怎么办呢? 可以断掉环上的一条 ...

  10. SRM 653 CountryGroupHard

    SRM 653 CountryGroupHard 题意: n 个人坐成一排,同一个国家的人坐在一起,记者问了一些人他们的国家有多少人,他们都回答了正确的信息.已知m条信息,每条信息形如第 pi 个位置 ...