用缓动动画实现鼠标跟随

鼠标跟随是为了更好的用户体验而存在，鼠标移动到某个元素的位置，一张代表鼠标的图也移到当前元素的位置，用户能更好的看到自己的鼠标位置，也能用这个做普通特效。当鼠标移动到某个位置，那张图也移动到某个位置，移出则恢复到初始位置，当点击则用当前位置做初始位置，也能帮助用户记住之前点击的图，具体如下：
先创建一个大盒子，然后再放入一个小盒子，这个放入的是一朵云，然后在里面用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 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10obj.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
点击就用鼠标位置等目标位置
好了一个简单的动画效果的鼠标跟随就出来了。

用缓动动画实现鼠标跟随相关推荐

11、《每周一点canvas动画》——缓动动画
本系列文章代码文件前面的章节我们介绍了许多基本的动画,在本节我们将使用这些基本的动画来创建一些高级动画.今天我们介绍的第一个高级动画叫做缓动动画(ease),也许在写css动画的时候已经接触过 ea ...
canvas系列教程07 ——捕获、拖拽、抛掷、缓动动画、弹性动画
捕获物体多边形以及不规则图形的捕获非常复杂,采用的方法是分离轴定理(SAT)和最小平移向量(MTV).这里不展开介绍,有兴趣的小伙伴可以自行搜索了解一下.下面来介绍一下矩形和圆的捕获. 矩形的捕获 ...
【JavaScript】缓动动画、网页轮播图
缓动动画动画函数封装 1.1 动画实现原理缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面案例:京东侧边栏 ...
js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
JavaScript 音乐导航(缓动动画、会唱歌的导航)
效果展示鼠标在导航栏上移动,每一项发出一种音符(do re mi fa so la xi),同样键盘上的1-7数字也可以有同样的效果. 资源下载音乐导航(缓动动画.会唱歌的导航) 代码 index ...
js学习笔记（获取选中内容、缓动动画、动态设置元素属性）
获取选中内容 1.标准浏览器 window.getSelection()拿到的是对象 window.getSelection().toString()拿到的是选中的文字 2.ie获取选中文字 docu ...
背水一战 Windows 10 (15) - 动画: 缓动动画
背水一战 Windows 10 (15) - 动画: 缓动动画原文:背水一战 Windows 10 (15) - 动画: 缓动动画 [源码下载] 背水一战 Windows 10 (15) - 动画: ...
缓动动画_核心动画概念：缓入缓出
缓动动画 With the arrival of CSS transitions, animation is now completely at home on web pages. In anima ...
SVG—初识3之SVG动画（缓动动画、时间轴线、时间交错）
SVG-初识3 SVG动画使用GSAP制作动画缓动动画时间轴线时间交错 SVG动画 Transform(scale.rotate.translate .skew) 路径动画 (path) 描边 ...

用缓动动画实现鼠标跟随

用缓动动画实现鼠标跟随相关推荐

最新文章

热门文章