鼠标跟随动画教程-优快云博客

本文链接：https://blog.youkuaiyun.com/Infinityfeng/article/details/106467537

鼠标跟随是为了更好的用户体验而存在，鼠标移动到某个元素的位置，一张代表鼠标的图也移到当前元素的位置，用户能更好的看到自己的鼠标位置，也能用这个做普通特效。当鼠标移动到某个位置，那张图也移动到某个位置，移出则恢复到初始位置，当点击则用当前位置做初始位置，也能帮助用户记住之前点击的图，具体如下：
先创建一个大盒子，然后再放入一个小盒子，这个放入的是一朵云，然后在里面用ul放入li，li里面一般使用a链接

接下来是CSS样式由于云用缓动动画展示效果更好，所以云需要用到定位 >下面展示一些 `内联代码片`。下面展示一些 `内联代码片`。 * { margin: 0; padding: 0 }

    ul {
        list-style: none;
    }
    
    body {
        background-color: black;
    }
    
    .c-nav {
        width: 900px;
        height: 42px;
        background: #fff url(images/rss.png) no-repeat right center;
        margin: 100px auto;
        border-radius: 5px;
        position: relative;
    }
    
    .c-nav ul {
        position: absolute;
    }
    
    .c-nav li {
        float: left;
        width: 83px;
        text-align: center;
        line-height: 42px;
    }
    
    .c-nav li a {
        color: #333;
        text-decoration: none;
        display: inline-block;
        height: 42px;
    }
    
    .c-nav li a:hover {
        color: white;
    }
    
    .c-nav li.current a {
        color: #0dff1d;
    }
    
    .cloud {
        position: absolute;
        left: 0;
        top: 0;
        width: 83px;
        height: 42px;
        background: url(images/cloud.gif) no-repeat;
    }

接下来创建一个缓动动画，又不知道写的可以直接引用,注意函数的三个参数值即可，第一个对象，第二个目标距离，第三个回调函数（回调函数是前面的执行完毕再执行回调函数，注意一下执行顺序就行）
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()

// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
    // 步长值写到定时器的里面
    // 把我们步长值改为整数 不要出现小数的问题
    // var step = Math.ceil((target - obj.offsetLeft) / 10);
    var step = (target - obj.offsetLeft) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if (obj.offsetLeft == target) {
        // 停止动画 本质是停止定时器
        clearInterval(obj.timer);
        // 回调函数写到定时器结束里面
        // if (callback) {
        //     // 调用函数
        //     callback();
        // }
        callback && callback();
    }
    // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
    obj.style.left = obj.offsetLeft + step + 'px';

}, 15);

}
接下用JS来实现移入移出点击事件
移入：
先用window的加载事件用load 这样用户在页面资源全部加载完毕才执行JS代码
然后获取元素
再创建一个变量记录云的初始位置
var index=0
用一个循环创建每一个LI的事件
第一个移入事件
引入缓动函数
animate(cloud,this.offsetLeft)
然后用传参就行了
第一个是缓动函数的对象
第二个移动的位置
移出事件
animate(cloud,index)
index==0
移出就回到第一个位置
点击事件
target=this.offsetLeft
点击就用鼠标位置等目标位置
好了一个简单的动画效果的鼠标跟随就出来了。

用缓动动画实现鼠标跟随