注意事项：

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. Crashing Robots POJ 2632 简单模拟

    Description In a modernized warehouse, robots are used to fetch the goods. Careful planning is neede ...

  2. [poj2368]Buttons_博弈论

    Buttons poj-2368 题目大意:给定n个按钮,每次可以按动[1,t]个.求最小的t使得先手必败. 注释:$1\le n\le 10^8$. 想法:经典巴什博弈. 求n的最小非1约数-1即可 ...

  3. [bzoj 1041][HAOI2008]圆周上的整点（枚举）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1041 分析:实质上是求(a,b,c)勾股数的个数,其中c是确定的. 对于勾股数有一组通式: a ...

  4. ubuntu 网络监控 nethogs

    ***网络监控ubuntu自带的 netstat -an 查看当前网络状况 sudo netstat -anp 查看当前网络状况带对应进程号 traceroute 追踪路由 ***我比较喜欢用Neth ...

  5. [Elasticsearch] 集群的工作原理 - 第一部分

    本文翻译自Elasticsearch官方指南的life inside a cluster一章. ES就是为高可用和可扩展而生的. 扩展能够通过购置性能更强的server(垂直扩展或者向上扩展,Vert ...

  6. HDU1813:Escape from Tetris(IDA)

    Problem Description 因为整日整夜地对着这个棋盘,Lele最终走火入魔.每天一睡觉.他就会梦到自己会被人被扔进一个棋盘中,一直找不到出路,然后从梦中惊醒.久而久之,Lele被搞得精神 ...

  7. C++对象模型——Template中的名称决议方式 (第七章)

    Template中的名称决议方式 (Name Resolution within a Template) 必须可以区分下面两种意义,一种是C++ Standard所谓的"sope of th ...

  8. SVN合并(merge)的使用

    使用svn几年了,一直对分支和合并敬而远之,一来是由于分支的管理不该我担心,二来即使涉及到分支的管理,也不敢贸然使用合并功能,生怕合并出了问题对团队造成不良影响.最基本的原因是,自己对分支的目的和合并 ...

  9. 手把手教你把Vim改装成一个IDE编程环境(图文)【转】

    本文转载自: http://blog.csdn.net/wooin/article/details/1858917

  10. B2761 [JLOI2011]不重复数字 离散化

    就是一道离散化的裸题,但是在写的时候遇到了一些不可描述的问题,但是还是很顺利的. 题干: Description 给出N个数,要求把其中重复的去掉,只保留第一次出现的数. 例如,给出的数为1 ,其中2 ...