本文聚焦前端动画，介绍链式动画，即动画执行完可链接另一个动画，还讲解轮播图的多种实现方式，如滚动切换、透明度切换、图标切换等，包括无缝轮播和升级版带焦点轮播图。同时提及第三方动画的js，如move.js、animated.css、swiper.js等。
链式动画
动画执行完接另一个动画不断进行链接
carousel_PerfectVersion.js文件（下列源码中用到的）
//获取显示盒子
var showBox = document.querySelector('.showBox')
//获取显示盒子的宽度
var showWidth = parseFloat(getStyle(showBox).width)
//获取ul（需要切换位置的容器）
var wrap = document.querySelector('.wrap')
//获取焦点的盒子
var cirList = document.querySelector('.cirList')
//获取箭头的盒子
var arrow = document.querySelector('.arrow')
//变化的下标
var i = 0
//焦点取值的下标
var index = 0
//定时器
var timer
//调用init的方法
init()
//调用自动移动的方法
autoMove()
//给showBox添加移入事件
showBox.onmouseenter = function () {
//清除定时器
clearInterval(timer)
//显示箭头的盒子
arrow.style.display = 'block'
}
//移出继续执行
showBox.onmouseleave = function () {
//调用轮播
autoMove()
//隐藏
arrow.style.display = 'none'
}
//给箭头添加事件
Array.from(arrow.children).forEach((v, i) => {
v.onclick = (e) => {
e = e || window.event
//禁止a标签默认行为
e.preventDefault();
move(wrap, showWidth, i)
}
})
//给cirList下面的li添加点击事件 事件委托机制
cirList.onclick = function (e) {
e = e || window.event
//判断当前操作的元素是否为li
if (e.target.tagName == 'LI') {
//获取当前点击的li的下标
let clcikIndex = Array.from(cirList.children).findIndex((v) => {
//如果当前操作的对象是遍历的对象那么返回出去
return v == e.target
})-1
//改变对应位置及下标
index = clcikIndex
i = clcikIndex
//调用move移动
move(wrap, showWidth)
}
}
//初始化生成焦点的方法
function init() {
//拷贝之前生成对应的焦点
Array.from(wrap.children).forEach((v, i) => {
//在第一个焦点添加一个class名字为selected
if (i == 0) {
cirList.innerHTML += `<li class='selected'></li>`
} else {
//生成对应的焦点加入到cirList里面
cirList.innerHTML += `<li></li>`
}
})
//拷贝第一张图加到最后
//克隆第一个li
var firstLi = wrap.children[0].cloneNode(true)
//将克隆的元素加入到ul
wrap.appendChild(firstLi)
}
//封装一个autoMove的函数
function autoMove() {
//切换图片的定时器
timer = setInterval(() => {
move(wrap, showWidth)
}, 2000)
}
//封装一个焦点变化的函数 传入的index表示当前要设置的焦点
function changeCir(index) {
//排他思维
//先将所有的class清除
Array.from(cirList.children).forEach((li) => {
li.className = ''
})
//再给自己添加对应的样式
cirList.children[index].className = 'selected'
}
//抽取方法 x轴移动 移动的元素 变化i值 移动的宽度 对应的方向（默认为正方向）
function move(element, showWidth, isAsc = true) {
//先检索区间
rangeCheck(element, isAsc)
//再进行i值变化
if (isAsc) {
i++
index++
} else {
i--
index--
}
//焦点切换及区间检索
rangeCheckCir(element)
//执行动画
//移动对应的ul 0 -400 -800
//距离等于 当前下标*对应显示盒子的宽度*-1
var distance = i * showWidth * -1
bufferAnimation(element, {
left: distance
}, () => {
})
}
//区间检索i下标
function rangeCheck(element, isAsc) {
//到达最后下标
if (i >= element.children.length - 1 && isAsc) {
//i的值重新变成0
i = 0
}
if (i <= 0 && !isAsc) {
//立即设置位置 到第一张设置位置为最后一张
i = element.children.length - 1
}
//设置位置
element.style.left = i * showWidth * -1 + 'px'
}
//区间检索对应的焦点下标值
function rangeCheckCir(element) {
//判断焦点下标
if (index < 0) { //8张图 下标为 0-7 7个焦点 下标 0-6
index = element.children.length - 2
}
if (index > element.children.length - 2) {
index = 0
}
//更改焦点
changeCir(index)
}move_PerfectVersion.js文件（下列源码中用到的）
//匀速运动的方法
//element表示移动的元素 target 目标位置{width:100,left:500}
function uniformVelocityAnimation(element, targetObj,callbackFn) {
//遍历target得到他的样式
for (let key in targetObj) {//key是字符串
//获取移动的目标样式的值
let current = parseFloat(getStyle(element)[key])
//得到目标值
let target = targetObj[key]
//步长设置 如果目标值是小于我们当前的值那么对应变化的量为负值 如果目标值大于我们当前值那么变化量为正值
let step = target > current ? 10 : -10
//定时更改
let timer = setInterval(() => {
//判断是否到达目标位置
if (current == target) {
clearInterval(timer)
} else {
//每次将对应的当前值更改
current += step
//重新设置div的样式
element.style[key] = current + 'px'
}
}, 40)
}
}
//缓冲运动封装
//element表示当前的元素 target表示目标对象
function bufferAnimation(element, targetObj,callbackFn) {
//如果element为undefined就直接报错
if(!element){
throw new Error('元素不能缺少')
}
//清除上一个定时器的影响
clearInterval(element.timer)
//给元素对象添加一个属性为timer他是一个定时器
element.timer = setInterval(() => {
var flag = true
//遍历对象
for (let key in targetObj) {
//取出当前值
let current = parseFloat(getStyle(element)[key])
//取出目标值
let target = targetObj[key]
//判断当前如果是位置的变化及对应的宽度高度的变化
if(key=='width' || key == 'height' || key == 'left' || key == 'top'){
//步长 负值向下取整 正值向上取整
var step = target-current>0?Math.ceil((target - current) / 10):Math.floor((target - current) / 10)
current += step
element.style[key] = current + 'px'
}
//如果是透明度的变化
if(key == 'opacity'){
//步长 负值向下取整 正值向上取整
var step = target-current>0?Math.ceil((target - current) * 1000 / 10):Math.floor((target - current)*1000 / 10)
current += step / 1000
element.style[key] = current
}
//如果是层高直接赋值
if(key == 'zIndex'){
element.style[key] = target
}
//如果没有完成就是false
if(current != target){
flag = false
}
}
//如果全部走完了就清除
if(flag){
clearInterval(element.timer)
//调用回调函数，如果传入的是一个函数
if(typeof callbackFn == 'function'){
callbackFn()
}
}
},10)
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element) {
if (window.getComputedStyle) {
return window.getComputedStyle(element, '')
} else {
return element.currentStyle
}
}封装进阶（通过传入回调函数完成链式运动）
//缓冲运动封装
//element表示当前元素 target表示目标对象 callbackFn表示传入的回调函数
function bufferAnimation(element,targetObj,callbackFn){
//如果element为undefined就直接报错
if(!element){
throw new Error('元素不能缺少')
}
//给元素对象添加一个属性为timer他是一个定时器
element.timer = setInterval(()=>{
var flag = true
//遍历对象
for(let key in targetObj){
//取出当前值
let current = parseFloat(getStyle(element)[key])
//取出目标值
let target = targetObj[key]
//判断当前如果是位置的变化及对应的宽度高度的变化
if(key=='width' || key=='height' || key=='left' || key=='top'){
//步长 负值向下取整 正值向上取整
var step = target-current>0?Math.ceil((target - current)/10):Math.floor((target - current)/10)
current +=step
element.style[key] = current + 'px'
}
//如果是透明的变化
if(key == 'opacity'){
//步长 负值向下取整 正值向上取整
var step = target-current>0?Math.ceil((target -current)*1000/10):Math.floor((target - current)*1000 / 10)
current += step /1000
element.style[key] = current
}
//如果是层高直接赋值
if(key == 'zIndex'){
element.style[key] = target
}
//如果没有完成就是false
if(current != target){
flag = false
}
}
//如果全部走完了就清除
if(flag){
clearInterval(element.timer)
//调用回调函数 如果传入的参数是函数
if(typeof callbackFn == 'function'){
callbackFn()
}
}
},20)
}示例（先变化div的宽度和高度，再变化它的位置）
<style type="text/css">
*{padding: 0;margin: 0;}
div{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div></div>
<button>点击变化</button>
<script>
//先让div跨度和高度变化 再改变它的位置
//获取div
var div = document.querySelector('div')
document.querySelector('button').onclick = function(){
//调用缓冲动画 （两个异步操作 不知道对应的异步什么时候走完）
//可以进行二次封装 通过回调函数来解决异步问题（使异步代码变同步代码）
bufferAnimation(div,{
width:200,
height:300
},()=>{
bufferAnimation(div,{
left:100
},()=>{
bufferAnimation(div,{
left:0
})
})
})
}
</script>
</body>轮播图
核心
-
对应的图的切换
-
滚动切换（更改的是对应的大盒子的位置）
-
透明度切换（更改的时候对应图片的透明度）
-
简单图片切换（直接变化对应的图片）
滚动切换
-
对应大盒子里面容纳多个图片
-
图片的大小和显示盒子的大小一致
-
对应的大盒子的大小超过了对应的显示盒子（溢出隐藏）
-
根据对应的切换的下标来控制对印的大盒子的位置
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./move_PerfectVersion.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
.showBox{
margin: 200px auto;
overflow: hidden;
}
.showBox,li{
width: 400px;
height: 250px;
}
li>img{
width: 100%;
}
ul{
width: 700%;
position: relative;
}
ul>li{
list-style: none;
float: left;
}
</style>
</head>
<body>
<div class="showBox">
<ul class="wrap">
<li><img src="./images/slidepic1.jpg" alt="" /></li>
<li><img src="./images/slidepic2.jpg" alt="" /></li>
<li><img src="./images/slidepic3.jpg" alt="" /></li>
<li><img src="./images/slidepic4.jpg" alt="" /></li>
<li><img src="./images/slidepic5.jpg" alt="" /></li>
<li><img src="./images/slidepic6.jpg" alt="" /></li>
<li><img src="./images/slidepic7.jpg" alt="" /></li>
</ul>
</div>
<script>
//获取显示的盒子
var showBox = document.querySelector('.showBox')
//获取展示合资的宽度
var showBoxWidth = parseFloat(getStyle(showBox).width)
console.log(showBoxWidth);
//获取ul（需要切换位置的容器）
var wrap = document.querySelector('.wrap')
console.log(wrap.children.length);
//封装一个autoMove的函数
function autoMove(){
//切换图片的定时器
var i = 0
var timer = setInterval(()=>{
i++//这个i就是控制对应的位置的下标
//到达最后 重新切换到第一个的位置
if(i == wrap.children.length){//这里表示的是当i到达wrap元素的子元素长度值(7)时,则重新切换到第一个位置
i = 0
}
//移动对应的ul(wrap) 0 -400 -800
//距离等于 当前下标 * 对应显示盒子的宽度 * -1
var distance = i * showBoxWidth * -1
bufferAnimation(wrap,{left:distance})
},2000)
}
//调用自动移动的方法
autoMove()
</script>
</body>透明度切换
-
所有的图叠加在一起
-
将前面的图片的透明度设置0 当前图片透明度设置1
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./move_PerfectVersion.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
.showBox{
margin: 200px auto;
/* overflow: hidden; */
}
.showBox,li{
width: 400px;
height: 250px;
/* position: relative; */
}
li>img{
width: 100%;
}
ul{
width: 100%;
position: relative;
}
ul>li{
list-style: none;
/* float: left; */
position: absolute;
opacity: 0;
}
li:first-child{
opacity: 1;
}
</style>
</head>
<body>
<div class="showBox">
<ul class="wrap">
<li><img src="./images/slidepic1.jpg" alt="" /></li>
<li><img src="./images/slidepic2.jpg" alt="" /></li>
<li><img src="./images/slidepic3.jpg" alt="" /></li>
<li><img src="./images/slidepic4.jpg" alt="" /></li>
<li><img src="./images/slidepic5.jpg" alt="" /></li>
<li><img src="./images/slidepic6.jpg" alt="" /></li>
<li><img src="./images/slidepic7.jpg" alt="" /></li>
</ul>
</div>
<script>
//获取显示的盒子
var showBox = document.querySelector('.showBox')
//获取展示合资的宽度
var showBoxWidth = parseFloat(getStyle(showBox).width)
console.log(showBoxWidth);
//获取ul（需要切换位置的容器）
var wrap = document.querySelector('.wrap')
// console.log(wrap.children.length);
//封装一个autoMove的函数
function autoMove(){
//切换图片的定时器
var i = 0
var timer = setInterval(()=>{
bufferAnimation(wrap.children[i],{opacity:0},()=>{
i++//这个i就是控制对应的位置的下标
//到达最后 重新切换到第一个的位置
if(i == wrap.children.length){//这里表示的是当i到达wrap元素的子元素长度值(7)时,则重新切换到第一个位置
i = 0
}
// //移动对应的ul(wrap) 0 -400 -800
// //距离等于 当前下标 * 对应显示盒子的宽度 * -1
// var distance = i * showBoxWidth * -1
// bufferAnimation(wrap,{left:distance})
bufferAnimation(wrap.children[i],{opacity:1})
})
},2000)
}
//调用自动移动的方法
autoMove()
</script>
</body>图标切换
-
根据下标的变化 切换对应的图片
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--<script type='text/javascript' src='./move_PerfectVersion.js'></script>-->
<!--<script type='text/javascript' src='./carousel_PerfectVersion.js'></script>-->
<style>
*{
margin: 0;
padding: 0;
}
.showBox{
width: 400px;
height: 250px;
margin: 200px auto;
}
img{
width: 100%;
}
</style>
</head>
<body>
<div class='showBox'>
<img src='./images/slidepic1.jpg' alt='' />
</div>
<script>
//获取图片
var img = document.querySelector('.showBox>img')
//封装一个autoMove的函数
function autoMove(){
//写一个切换图片的定时器
//因为是根据下标变化，所以先定义一个i=1为初始下标，不从0开始的原因是图片1已经在html页面中写好并渲染，起始命名为slidepic1，末尾的数字1在下面写切换图片的代码时会用到我们当前i每次变化后的值
var i = 1
var timer = setInterval(()=>{
i++
//当i加到7时，立即将当前i值赋为1，使得图片重新回到第一张再次依据定时器进行累加操作
if(i==7){
i = 1
}
//设置图片的src
img.src = `./images/slidepic${i}.jpg`
},2000)
}
//调用自动移动的方法
autoMove()
</script>
</body>无缝轮播（滚动轮播的进阶）
-
拷贝第一张到最后
-
判断是否到达最后一张 如果到达立马设置对应的位置为第一张的位置
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type='text/javascript' src='./move_PerfectVersion.js'></script>
<script type='text/javascript' src='./carousel_PerfectVersion.js'></script>
<style>
* {
margin: 0;
padding: 0;
}
.showBox,
li {
width: 400px;
height: 250px;
}
li>img {
width: 100%;
}
.showBox {
margin: 200px auto;
/* 溢出隐藏 */
overflow: hidden;
}
ul {
width: 800%;
position: relative;
}
ul>li {
list-style: none;
float: left;
}
</style>
</head>
<body>
<div class="showBox">
<ul class="wrap">
<li><img src="./images/slidepic1.jpg" alt=""></li>
<li><img src="./images/slidepic2.jpg" alt=""></li>
<li><img src="./images/slidepic3.jpg" alt=""></li>
<li><img src="./images/slidepic4.jpg" alt=""></li>
<li><img src="./images/slidepic5.jpg" alt=""></li>
<li><img src="./images/slidepic6.jpg" alt=""></li>
<li><img src="./images/slidepic7.jpg" alt=""></li>
</ul>
</div>
<script>
//获取显示的盒子
var showBox = document.querySelector('.showBox')
//获取显示盒子的宽度
var showWidth = parseFloat(getStyle(showBox).width)
//获取ul（需要切换位置的容器）
var wrap = document.querySelector('.wrap')
//拷贝第一张图加到最后
//克隆第一个li
var firstLi = wrap.children[0].cloneNode(true)
var i = 0
//将克隆元素加入到ul
wrap.appendChild(firstLi)
//封装一个autoMove函数
function autoMove(){
//切换图片的定时器
var timer = setInterval(()=>{
move(wrap,showWidth)
},2000)
}
//调用自动移动的方法
autoMove()
//抽取方法 x轴移动 移动的元素 变化的i值 移动的宽度 对应的方向（默认为正方向）
function move(element,showWidth,isAsc = true){
if(isAsc){
i++
}else{
i--
}
//移动对应的ul 0 -400 -800
//距离等于 当前的下标*对应显示盒子的宽度*-1
var distance = i*showWidth*-1
//执行动画
bufferAnimation(element,{
left:distance
},()=>{
//到达最后下标
if(i == element.children.length - 1 && isAsc){
//i的值重新变成0
i=0
}
if(i == 0 && !isAsc){
//立即设置 到第一张设置位置为最后一张
i=element.children.length - 1
}
//设置位置
element.style.left = i * showWidth * -1 + 'px'
})
}
</script>
</body>升级版带焦点轮播图
<script type="text/javascript" src="./move_PerfectVersion.js"></script>
<!--html代码-->
<style type="text/css">
*{padding: 0;margin: 0;}
.showBox{
margin: 200px auto;
overflow: hidden;
position: relative;
}
.showBox,li{
width: 400px;
height: 250px;
}
li>img{
width: 100%;
}
ul{
width: 800%;
position: relative;
}
ul>li{
list-style: none;
float: left;
}
.cirList{
position: absolute;
right: 20px;
bottom: 10px;
width: 150px;
}
.cirList>li{
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin:0 5px;
}
.cirList .selected{
background-color: red;
}
.arrow{
display: none;
}
.arrow>a{
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
}
.arrow>.previous{
background:url(./images/prev.png) no-repeat center;
background-size: contain;
left: 0;
}
.arrow>.next{
background: url(./images/next.png) no-repeat center;
background-size: contain;
right: 0;
}
.select{
background-color: red;
}
</style>
</head>
<body>
<div class="showBox">
<ul class="wrap">
<li><img src="./images/slidepic1.jpg" alt="" /></li>
<li><img src="./images/slidepic2.jpg" alt="" /></li>
<li><img src="./images/slidepic3.jpg" alt="" /></li>
<li><img src="./images/slidepic4.jpg" alt="" /></li>
<li><img src="./images/slidepic5.jpg" alt="" /></li>
<li><img src="./images/slidepic6.jpg" alt="" /></li>
<li><img src="./images/slidepic7.jpg" alt="" /></li>
</ul>
<!-- 焦点 -->
<ul class="cirList">
</ul>
<div class="arrow">
<a href="#" class="previous"></a>
<a href="#" class="next"></a>
</div>
</div>
<!--javascript主体代码-->
<script>
//获取显示的盒子
var showBox = document.querySelector('.showBox')
//获取展示盒子的宽度
var showBoxWidth = parseFloat(getStyle(showBox).width)
console.log(showBoxWidth);
//获取ul（需要切换位置的容器）
var wrap = document.querySelector('.wrap')
console.log(wrap.children.length);
//获取焦点的盒子
var cirList = document.querySelector('.cirList')
//获取箭头的盒子
var arrow = document.querySelector('.arrow')
//变化的下标
var i = 0
//焦点取值的下标
var index = 0
var timer
//调用init方法
init()
//调用自动移动的方法
autoMove()
//给showBox添加移入事件
showBox.onmouseenter = function(){
//清除定时器
clearInterval(timer)
//显示箭头的盒子
arrow.style.display = 'block'
}
//移出继续执行
showBox.onmouseleave = function(){
//调用轮播
autoMove()
//隐藏
arrow.style.display = 'none'
}
//给箭头添加事件
Array.from(arrow.children).forEach((v,i)=>{
v.onclick = (e) =>{
e = e || window.event
//禁止a标签的默认行为
e.preventDefault();
move(wrap,showBoxWidth,i)
}
})
//给cirList下面的li添加点击事件 时间委托机制
cirList.onclick = function(e){
e = e || window.event
//判断当前操作元素是否为li
if(e.target.tagName == 'LI'){
//获取当前点击的li的下标
let clickIndex = Array.from(cirList.children).findIndex((v)=>{
//如果当前操作对象时遍历的对象那么返回出去
return v == e.target
})-1
//改变对应位置及下标
index = clickIndex
i = clickIndex
//调用move移动
move(wrap,showBoxWidth)
}
}
//初始化生成焦点的方法
function init(){
//拷贝之前生成对应的焦点
Array.from(wrap.children).forEach((v,i)=>{
//在第一个焦点添加一个class名字为selected
if(i == 0){
cirList.innerHTML += `<li class='selected'></li>`
}else{
//生成对应的焦点加入到cirList里面
cirList.innerHTML += `<li></li>`
}
})
//拷贝第一张图加到最后
//克隆第一个li
var firstLi = wrap.children[0].cloneNode(true)
//将克隆的元素加入到ul
wrap.appendChild(firstLi)
}
function autoMove(){
//切换图片定时器
timer = setInterval(()=>{
move(wrap,showBoxWidth)
},2000)
}
function changeCir(index){
//排他思想
//先将所有的class清除
Array.from(cirList.children).forEach((li)=>{
li.className = ''
})
//再给自己添加对应的样式
cirList.children[index].className = 'selected'
}
//封装一个autoMove的函数
// function autoMove(){
// //切换图片的定时器
// var i = 0
// var timer = setInterval(()=>{
// i++//这个i就是控制对应的位置的下标
// //到达最后 重新切换到第一个的位置
// if(i == wrap.children.length){//这里表示的是当i到达wrap元素的子元素长度值(7)时,则重新切换到第一个位置
// i = 0
// }
// //移动对应的ul(wrap) 0 -400 -800
// //距离等于 当前下标 * 对应显示盒子的宽度 * -1
// var distance = i * showBoxWidth * -1
// bufferAnimation(wrap,{left:distance})
// },2000)
// }
// //调用自动移动的方法
// autoMove()
//抽取方法 x轴移动 移动的元素 变化i值 移动的宽度 对应的方向（默认为正方向）
function move(element,showBoxWidth,isAsc = true){
//先检索区间
rangeCheck(element,isAsc)
//再进行i值的变化
if(isAsc){
i++
index++
}else{
i--
index--
}
//焦点切换及区间检索
rangeCheckCir(element)
//执行动画
//移动对应的ul 0 -400 -800
//距离等于当前下标*对应显示盒子的宽度*-1
var distance = i * showBoxWidth * -1
bufferAnimation(element,{
left:distance
},()=>{
})
}
//区间检索i下标
function rangeCheck(element,isAsc){
//到达最后下标
if(i>=element.children.length - 1 && isAsc){
//i的值重新变成0
i = 0
}
if(i<=0 && !isAsc){
//立即设置位置 到第一张设置位置为最后一张
i = element.children.length - 1
}
//设置位置
element.style.left = i * showBoxWidth * -1 + 'px'
}
//区间检索对应的焦点下标值
function rangeCheckCir(element){
//判断焦点下标
if(index<0){//8张图 下标为0-7 7个焦点 下标为 0-6
index = element.children.length - 2
}
if(index>element.children.length - 2){
index = 0
}
//更改焦点
changeCir(index)
}
</script>
</body>重点
-
逻辑的掌握
-
dom操作
-
定时器操作
-
错误的解决
-
定时器里面套定时器（如果外面的执行时间要比里面的短 会导致里面的定时器无法被清除（定时器的作用范围内要清除对应的定时器）
-
知识点的运用
-
封装（函数封装 抽取共同点）
-
同步和异步（通过回调函数解决 定时器是异步的 时间也是异步的）
第三方动画的js
move.js
<div class="box"></div>
<div class="mybox"></div>
<script src='https://cdn.bootcdn.net/ajax/libs/move.js/0.5.0/move.js'></script>
<script>
move('.box')
.to(500, 200) //位置改变 x为500 y为200
.rotate(180) //旋转180deg
.scale(.5) //缩小0.5倍
.set('background-color', '#888')//背景颜色
.set('border-color', 'black')//边框颜色
.duration('2s')//执行时间
.skew(50, -10) //偏移
.then() //成功
// .set('opacity', 0) //透明度为0
.duration('0.3s') //时间
.scale(0.1) //缩小
.pop() //加上他才能执行颜色设置相关的内容
.end(); //动画结束
//背景颜色变成绿色
// 位置 变成 300 300
// 旋转 180deg
// 上面做完 放大2倍
move('.mybox')
.to(300,300)
.set('background-color', '#f0f')
.rotate(180)
.duration('3s')
.then().scale(2).duration('10s').pop().end()
</script>animated.css（封装了css3的动画效果）
cdn
https://cdn.staticfile.org/animate.css/4.1.1/animate.min.css
swiper.js（封装轮播图）
扫一扫
461
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
