注意事项：

1、pageX、pageY的兼容问题

2、使目标移动鼠标中间位置还必须减去盒子宽度的一半

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: #ccc;

            position: absolute;

        }

    </style>

</head>

<body>

<div></div>

<script>

    var divEle = document.getElementsByTagName("div")[0];

    var timer = null;

    document.onclick = function (ev) {

        ev = ev || window.event;

        console.log(ev);

        var pageX = ev.pageX || scroll().left + ev.clientX;

        var pageY = ev.pageY || scroll().top + ev.clientY;

        animateX(divEle, pageX - 50, pageY - 50);

    }

    function animateX(ele, targetX, targetY) {

        clearInterval(timer);

        timer = setInterval(function () {

            var stepX = (targetX - ele.offsetLeft) / 10;

            stepX = stepX > 0 ? Math.ceil(stepX) : Math.floor(stepX);

            ele.style.left = ele.offsetLeft + stepX + "px";

            console.log(1);

            var stepY = (targetY - ele.offsetTop) / 10;

            stepY = stepY > 0 ? Math.ceil(stepY) : Math.floor(stepY);

            ele.style.top = ele.offsetTop + stepY + "px";

            if (Math.abs(targetX - ele.offsetLeft) <= Math.abs(stepX) && Math.abs(targetY - ele.offsetTop) <= Math.abs(stepY)) {

                ele.style.left = targetX + "px";

                ele.style.top = targetY + "px";

                clearInterval(timer);

            }

        }, 15);

    }

    function scroll() {

        return {

            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,

            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

        };

    }

</script>

</body>

</html>

JS——鼠标跟随的更多相关文章

  1. 模仿bootstrap做的 js tooltip (添加鼠标跟随功能)

    主要思路: 使用jquery hover方法,当进入时显示tooltip,移出时隐藏tooltip当设定为鼠标跟随时,使用mousemove事件显示tooltip根据tooltip显示位置设置,计算t ...

  2. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  3. 鼠标跟随效果 vue或者js通用

    this.$refs.tooltip.getBoundingClientRect() => 用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. ...

  4. 【js】鼠标跟随效果

    1.实现思想 ①鼠标跟随效果,发生在鼠标移动的时候,故需要使用onmousemove事件 ②当页面内容多于1屏时,就需要考虑滚动距离的问题 ③想实现鼠标跟随的效果需要: 元素的left位置 = 鼠标当 ...

  5. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  6. 【前端】javascript实现鼠标跟随特效

    实现效果: 实现代码: <!DOCTYPE html> <html> <head> <title>鼠标跟随</title> <meta ...

  7. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  8. js 鼠标事件的抓取代码

    js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...

  9. js鼠标及对象坐标控制属性详细解析

    对js鼠标及对象坐标控制属性进行了详细的分析介绍.  offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 ...

随机推荐

  1. [K/3Cloud]在插件中根据条件取消表单打开过程

    新建一个类,继承自动态表单抽象插件类AbstractBillPlugIn,重写PreOpenForm. /// <summary> /// 销售订单 单据维护界面插件 /// </s ...

  2. J2EE 课件3 JSP标记

    •JSP标记包括指令标记.动作标记和自定义标记.其中自定义标记主要讲述与Tag文件有关的Tag标记    1.指令标记page page 指令用来定义整个JSP页面的一些属性和这些属性的值,属性值用单 ...

  3. codevs 1296 营业额统计 （splay 点操作）

    题目大意 每次加入一个值,并且询问之前加入的数中与该数相差最小的值. 答案输出所有相差值的总和. 解题分析 = = 参考程序 #include <bits/stdc++.h> using ...

  4. 洛谷—— P2176 [USACO14FEB]路障Roadblock

    https://www.luogu.org/problem/show?pid=2176 题目描述 每天早晨,FJ从家中穿过农场走到牛棚.农场由 N 块农田组成,农田通过 M 条双向道路连接,每条路有一 ...

  5. Windows 10+Ubuntu 16.04双系统切换后时间不同步的问题解决

    主要时时区不对造成的,少了8个小时,解决方法: 在Ubuntu的终端下输入以下命令: sudo timedatectl set-local-rtc 1 参考: http://blog.csdn.net ...

  6. 【Android】自己定义圆形ImageView(圆形头像 可指定大小)

    近期在仿手Q的UI,这里面常常要用到的就是圆形头像,看到 在android中画圆形图片的几种办法 这篇文章,了解了制作这样的头像的原理.只是里面提供的方法另一个不足的地方就是不能依据实际需求改变图片的 ...

  7. JavaSE入门学习12： Java面相对象之static使用方法

    我们能够基于一个类创建多个该类的对象,每一个对象都拥有自己的成员,互相独立. 然而在某些时候,我们更希 望该类全部的对象共享同一个成员. 此时就是static大显身手的时候了. Java中被stati ...

  8. Index statistics collected bug

    SQL运行引擎会从pg_stats.pg_class等相关系统字典表.视图获取生成最佳运行计划的数据,假设相关字典视图的数据不准确就没有办法生成良好的运行计划. 发现下面Bug一枚. 0. 插入数据之 ...

  9. java-javabean Introspector的应用

    Introspector 类为通过工具学习有关受目标 Java Bean 支持的属性.事件和方法的知识提供了一个标准方法. 对于这三种信息,Introspector 将分别分析 bean 的类和超类, ...

  10. Codeforces Round #250 (Div. 2)B. The Child and Set 暴力

    B. The Child and Set   At the children's day, the child came to Picks's house, and messed his house ...