注意事项：

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. HDU——1787 GCD Again

    题意: 在一次acm竞赛之后,你花了一些时间去思考和尝试解决那些未解决的问题吗? 不知道?哦,当你想成为“大牛”的时候,你就必须这样做. 现在你会发现,这个问题是如此熟悉: 两个正整数a和b的最大GC ...

  2. - > 动规讲解基础讲解三——混合背包（背包模板）

    将01背包,完全背包,和多重完全背包问题结合起来,那么就是混合三种背的问题 根据三种背包的思想,那么可以得到混合三种背包的问题可以这样子求解 for(int i=1; i<=N; ++i) if ...

  3. 表单中的日期 字符串和Javabean中的日期类型的属性自动转换

    搞了一上午的bug最终还是因为自己springMVC的注解不熟悉的原因,特记录. 在实际操作中经常会碰到表单中的日期 字符串和Javabean中的日期类型的属性自动转换, 而springMVC默认不支 ...

  4. 去除ckeditor上传图片预览中的英文字母

    去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...

  5. SPOJ QTREE2 lct

    题目链接 题意: 给一棵树.有边权 1.询问路径的边权和 2.询问沿着路径的第k个点标. 思路:lct裸题. #include <iostream> #include <fstrea ...

  6. 【Cocos2dx游戏开发】CCNotificationCenter传递消息和数据

    在开发游戏的时候我们经常需要在层与层之间.场景与场景之间传递数据和消息,Cocos2dx框架应用观察者模式为我们封装了一个CCNotificationCenter类,也叫消息通知中心,它也是一个单例类 ...

  7. hdu 1024 Max Sum Plus Plus (子段和最大问题)

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  8. easyUI中的layout

    Layout 通过$.fn.layout.defaults能够重写Layout. layout是一个具有五个区域的容器.仅仅有中间区域面板是必须的,其余的都是边界面板.每个边界面板都能够通过拖动它的边 ...

  9. The Secant Method(正割法、弦截法) 附C语言代码

    弦截法是一种求方程根的基该方法,在计算机编程中经常使用. 他的思路是这种:任取两个数x1.x2,求得相应的函数值f(x1).f(x2).假设两函数值同号,则又一次取数.直到这两个函数值异号为止. 连接 ...

  10. LeetCode 824. Goat Latin (山羊拉丁文)

    题目标签:String 首先把vowel letters 保存入 HashSet. 然后把S 拆分成 各个 word,遍历每一个 word: 当 word 第一个 字母不是 vowel 的时候,把第一 ...