动画函数封装 —— 筋头云图案跟随鼠标移动

要求
利用动画函数做动画效果

思路

原先筋斗云的起始位置是0
鼠标经过某个 li，把当前 li 的 offsetLeft 位置做为目标值即可
鼠标离开某个 li，就把目标值设为 0
如果点击了某个 li，就把 li 当前的位置存储起来，做为筋斗云的起始位置

<--! jinDouYun.html-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>TumblingCloudCase</title><!-- import initial css style file --><link rel="stylesheet" href="css/base.css"><!-- import proprietary style file --><link rel="stylesheet" href="css/style.css"><!-- import animation function file --><script src="js/animate.js"></script><!-- import proprietary js files --><script src="js/proper.js"></script>
</head><body><div class="nav com" id="nav"><span class="cloud"></span><ul><li class="current"><a href="#">首页新闻</a></li><li><a href="#">师资力量</a></li><li><a href="#">活动策划</a></li><li><a href="#">企业文化</a></li><li><a href="#">公司简介</a></li><li><a href="#">招聘信息</a></li><li><a href="#">流程动态</a></li><li><a href="#">个人中心</a></li></ul></div>
</body></html>

/* base.css */
/* initial css style file */* {/* clear inner and outer margins */margin: 0;padding: 0;
}li {/* clear list style for li */list-style: none;
}a {/* change hyperlink color */color: #333;/* clear underline */text-decoration: none;
}a:hover {color: #fff;
}img {/* clear the picture border and take care of the browser of the lower version. If the picture contains links outside, there will be border problems. */border: 0;/* clear the blank gap at the bottom of the picture */vertical-align: middle;
}body {/* css3 anti aliasing for clearer text display */-webkit-font-smoothing: antialiased;background-color: #000;/* \5B8B\4F53  song style —— avoid the problem of garbled code when the browser parses css code */font: 16px/1 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;color: #333;
}/* type page */
.com {width: 900px;margin: 70px auto;
}/* style.css */
/* proprietary style file */.nav {position: relative;padding-left: 10px;height: 42px;line-height: 42px;background: #fff url(../images/rss.png) no-repeat right center;
}.nav ul {position: absolute;
}.nav li {margin-right: 19px;float: left;
}.nav li:last-child {margin-right: 0;
}.cloud {position: absolute;left: 0;top: 0;width: 83px;height: 42px;background: url(../images/cloud.gif) no-repeat;
}.nav li a {transition: .3s;
}.nav li:hover a {color: #fff;
}.nav li.current a {color: red;
}

// animate.js
// animation function filefunction animate(obj, target, callback) {// clear the previous timer first, and only keep the current timer executionclearInterval(obj.timer);obj.timer = setInterval(function () {// the step value needs to be written into the timervar step = (target - obj.offsetLeft) / 10;// change the step size value to an integer, without the decimal problemstep = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {// stop animation、stop timerclearInterval(obj.timer);// callback function// if (callback) {//     // call function//     callback();// }callback && obj.callback;}obj.style.left = obj.offsetLeft + step + 'px';}, 10)
}// proper.js
window.addEventListener('load', function () {// get elementvar nav = document.querySelector('.nav');var cloud = document.querySelector('.cloud');var lis = document.querySelectorAll('li');// current as the starting position of the loop cloudvar current = 0;// callfor (var i = 0; i < lis.length; i++) {// mouse passinglis[i].addEventListener('mouseenter', function () {animate(cloud, this.offsetLeft);});// mouse away, jinDou cloud back to the starting positionlis[i].addEventListener('mouseleave', function () {animate(cloud, current);});// click the mouse to take the current position as the target valuelis[i].addEventListener('click', function () {current = this.offsetLeft;// kill everyone：clear all classes of lifor (var i = 0; i < lis.length; i++) {lis[i].className = '';}// leave yourselfthis.className = 'current';});}
})

动画函数封装 —— 筋头云图案跟随鼠标移动相关推荐

PC端网页特效二：mouseenter 和 mouseover 的区别、动画函数封装
目录 5.mouseenter 和 mouseover 的区别 6.动画函数封装动画实现原理简单动画函数封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动缓动函 ...
JavaScript 之网页特效篇（offset系列、client系列、scroll系列、动画函数封装、常见网页特效）
网页特效 1.元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置可以获取 ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
简单的动画函数封装（2）
<div></div><button class="btn1"> ...
最终的动画函数封装（2）
<button>点击触发1</button><button>点击触发2</button><div></div> <styl ...
简单的动画函数封装（1）
//创建简单的动画函数封装效果(目标对象,目标位置) function animate(obj,target){var id = setInterval(function(){if(obj.offse ...
移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）...
移动端 css3 transition 动画 ,requestAnimationFrame 动画对于性能的要求,h5优先考虑: 移动端单页有时候制作只用到简单的css3动画即可,我们封装一下, ...
简单动画函数封装及缓动效果
function animate(obj, target) {clearInterval(obj.timer);//obj.timer = setInterval(function() {var ti ...
【前端学习-16】【day06】WebAPI编程/动画函数封装/回调函数/轮播图/自动播放/节流阀/返回顶部/筋斗云/触屏事件/触屏事件对象/
新增动画前进后退效果案例:轮播图 1.显示隐藏功能 2.动态生成小圆圈 3.排他思想 4.开始滚动 5.右侧按钮 6.克隆第一张图片 7.小圆圈跟着右侧按钮变化 8.序号和点击的要统一 9.左侧代码 ...

动画函数封装 —— 筋头云图案跟随鼠标移动

动画函数封装 —— 筋头云图案跟随鼠标移动相关推荐

最新文章

热门文章