注意事项：

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. Bestcoder #92

    A =w= B 计数题,枚举A.C,算B.D的个数,注意减去重复的 我当时是f[1][n]->f[2][n]->f[3][n]->f[4][n]递推的 C 题意:长为n的字符串仅由' ...

  2. Ext.data.JsonStore的使用

    最近在维护一个Ext.js写的贷前服务系统,Ext.data.JsonStore相当于前台页面的一个数据仓库,负责保存后台传过来的Json数据,具体用法如下: var store12=new Ext. ...

  3. 用ZooKeeper做为注册中心搭建基于Spring Cloud实现服务注册与发现

    前提: 先安装好ZooKeeper的环境,搭建参考:http://www.cnblogs.com/EasonJim/p/7482961.html 说明: 可以再简单的理解为有两方协作,一个是服务提供这 ...

  4. ZOJ 3675 Trim the Nails（bfs）

    Trim the Nails Time Limit: 2 Seconds      Memory Limit: 65536 KB Robert is clipping his fingernails. ...

  5. 使用Jsoup解析和操作HTML

    jsoup 简单介绍 jsoup 是一款 Java 的HTML 解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套很省力的API,可通过DOM.CSS以及类似于jQuery的操作方法来取 ...

  6. Effective C++ Item 44 将与參数无关的代码抽离 templates

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 经验:Templates 生成多个 classes 和多个函数,所以不论什么 templat ...

  7. c#复制文件、文件夹代码

    c#没有复制目录的代码,需要通过递归实现复制目录: 使用方法: 1.把c:\temp\index目录下的所有子目录和文件复制到 c:\temp\newindex目录下. bool copy = Cop ...

  8. 【Ubuntu】莫名其妙硬盘空间满了

    一个个翻找,发现是 ~/.cache 占用了很多空间,遂删去其中内容 没有什么负面影响,删掉之后节省了许多空间

  9. sed 之 -n p

    sed是一个面向字符流的编辑器,一般情况下每次读入一行到一个名为模式空间的地方,进行编辑:但是也可以读入多行数据进行编辑. -n:抑制默认输出 p打印模式空间内容 cat test a b sed ' ...

  10. Paratroopers(最小割模型)

    http://poj.org/problem?id=3308 题意:一个m*n的网格,有L位火星空降兵降落在网格中,地球卫士为了能同时消灭他们,在网格的行或列安装了一个枪支,每行或每列的枪支都能消灭这 ...