注意事项：

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. 5-14 电话聊天狂人 (25分) HASH

    给定大量手机用户通话记录,找出其中通话次数最多的聊天狂人. 输入格式: 输入首先给出正整数NN(\le 10^5≤10​5​​),为通话记录条数.随后NN行,每行给出一条通话记录.简单起见,这里只列出 ...

  2. [bzoj 1042][HAOI2008]硬币购物（用容斥原理弄背包）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1042 分析: 解法很巧妙,用f[i]表示四种硬币A.B.C.D的数量不考虑的情况下弄成 ...

  3. Spring Cloud ZooKeeper集成Feign的坑2，服务调用了一次后第二次调用就变成了500，错误：Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is com.n

    错误如下: 2017-09-19 15:05:24.659 INFO 9986 --- [ main] s.c.a.AnnotationConfigApplicationContext : Refre ...

  4. mysqlhighavailability

    http://mysqlhighavailability.com/getting-started-with-mysql-group-replication/

  5. 【CV论文阅读】Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks

    由RCNN到FAST RCNN一个很重要的进步是实现了多任务的训练,但是仍然使用Selective Search算法来获得ROI,而FASTER RCNN就是把获得ROI的步骤使用一个深度网络RPN来 ...

  6. 菜鸟nginx源代码剖析 框架篇（一） 从main函数看nginx启动流程

    菜鸟nginx源代码剖析 框架篇(一) 从main函数看nginx启动流程 Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.c ...

  7. express 不是内部或外部命令（windows）解决方式

    请环境变量设置 注意 "D:\soft\nodejs\"这个是笔者自己安装在电脑上的node js文件夹,请改动成自己的 假设安装的express是4.X就要安装 express- ...

  8. Spring MVC学习-------------訪问到静态的文件

    怎样訪问到静态的文件,如jpg,js,css? 怎样你的DispatcherServlet拦截"*.do"这种有后缀的URL.就不存在訪问不到静态资源的问题. 假设你的Dispat ...

  9. Data Url生成工具之HTML5 FileReader实现

    百度经验版本号:怎样用HTML5的FileReader生成Data Url 上一篇讲了:用Visual Studio 2010编写Data Url生成工具C#版 今天用HTML5 FileReader ...

  10. hdu 6119 小小粉丝度度熊(尺取）

    小小粉丝度度熊 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...