day17 运动（下）

weixin_51421372

于 2022-10-24 20:05:46 发布

阅读量38

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/weixin_51421372/article/details/127499616

版权

链式动画
动画执行完接另一个动画不断进行链接。
封装进行（通过传入回调函数完成链式运动）

//缓冲运动封装
//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)
//调用回调函数 如果传入的参数是函数
}
},20)
}

示例（先变化div的宽度和高度再变化他的位置）

<script>
//先让div宽度和高度变化 再改变他的位置
//获取div
var div = document.querySelector('div')
document.querySelector('button').onclick = function () {
//调用缓冲动画 (俩个异步操作 你不知道对应的异步什么时候走完)
//可以进行二次封装 通过回调函数来解决异步的问题 （使异步变同步代码）
bufferAnimation(div, {
width: 200,
height: 300
}, () => {
//变化位置
bufferAnimation(div, {
left: 500
}, () => {
//变化位置
bufferAnimation(div, {
left: 100
})
})
})
}
</script>

轮播图

核心
对应图的切换
滚动切换（更改的是对应大盒子的位置）
透明度切换（更改的时候对应图片的透明度）
简单图片切换（直接变化对应的图片）
滚动切换
对应大盒子里面容纳多个图片
图片的大小和显示盒子的大小一致
对应的大盒子的大小超出了对应的显示盒子（溢出隐藏）
根据对应的切换的下标来控制对应的大盒子的位置

<!DOCTYPE html>
<html lang="en">
<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>
<style>
*
{
margin: 0;
padding: 0;
}
.
showBox,li{
width: 400px;
height: 250px;
}
li>img{
width: 100%;
}
.
showBox{
margin: 200px auto;
/* 溢出隐藏 */
/* overflow: hidden; */
}
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 src="./move.js"></script>
<script>
//获取显示盒子
var showBox = document.querySelector('.showBox')
//获取显示盒子的宽度
var showWidth = parseFloat(getStyle(showBox).width)
//获取ul（需要切换位置的容器）
var wrap = document.querySelector('.wrap')
//封装一个autoMove的函数
function autoMove(){
//切换图片的定时器
var i = 0
var timer = setInterval(()=>{
i++ //这个i就是控制对应的位置的下标
//到达最后 切换到第一个
},2000)
}
//调用自动移动的方法
autoMove()
</script>
</body>
</html>

透明度切换
所有的图叠在一起
将前面的图片的透明度设置0 当前图片透明度设置1

<!DOCTYPE html>
<html lang="en">
<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>
<style>
*
{
margin: 0;
padding: 0;
}
.
showBox,li{
width: 400px;
height: 250px;
}
li>img{
width: 100%;
}
.
showBox{
margin: 200px auto;
/* 溢出隐藏 */
/* overflow: hidden; */
}
ul>li{
list-style: none;
position: absolute;
opacity: 0;
}
ul>li:nth-child(1){
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 src="./move.js"></script>
<script>
//获取ul（需要切换位置的容器）
var wrap = document.querySelector('.wrap')
//封装一个autoMove的函数
function autoMove(){
//切换图片的定时器
var i = 0
var timer = setInterval(()=>{
//改透明度 将之前的全部设置为0
bufferAnimation(wrap.children[i],{opacity:0},function(){
i++ //这个i就是控制对应的位置的下标
//到达最后 切换到第一个
if(i==wrap.children.length){
i = 0
}
// 再将自己的透明度改为1
bufferAnimation(wrap.children[i],{opacity:1})
})
},2000)
}
//调用自动移动的方法
autoMove()
</script>
</body>
</html>

图片切换
根据下标的变化切换对应的图片

<!DOCTYPE html>
<html lang="en">
<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>
<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 src="./move.js"></script>
<script>
//获取图片
var img = document.querySelector('.showBox>img')
//封装一个autoMove的函数
function autoMove(){
//切换图片的定时器
var i = 1
var timer = setInterval(()=>{
i++
if(i==7){
i = 1
}
//设置图片的src
img.src = `./images/slidepic${i}.jpg`
},2000)
}
//调用自动移动的方法
autoMove()
</script>
</body>
</html>

无缝轮播（滚动轮播的进阶）
拷贝第一张到最后
判断是否到达最后一张如果到达立马设置对应的位置为第一张的位置

<!DOCTYPE html>
<html lang="en">
<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>
<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 src="./move.js"></script>
<script src="./carousel.js"></script>
<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) {
} else {
}
//移动对应的ul 0 -400 -800
//距离等于 当前下标*对应显示盒子的宽度*-1
var distance = i * showWidth * -1
//执行动画
bufferAnimation(element, {
}, () => {
})
}
</script>
</body>
</html>

升级版带焦点的轮播
html代码

<!DOCTYPE html>
<html lang="en">
<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>
<style>
*
{
margin: 0;
padding: 0;
}
.
showBox,
li {
width: 400px;
height: 250px;
}
li>img {
width: 100%;
}
.
showBox {
position: relative;
margin: 200px auto;
/* 溢出隐藏 */
overflow: hidden;
}
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>.prev{
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;
}
</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="prev"></a>
<a href="" class="next"></a>
</div>
</div>
<script src="./move.js"></script>
<script src="./carousel.js"></script>
</body>
</html>

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)
}

辅助代码

//缓冲运动封装
//element表示当前的元素 target表示目标对象 callbackFn表示传入的回调函数
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()
}
}
},0)
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element) {
if (window.getComputedStyle) {
return window.getComputedStyle(element, '')
} else {
return element.currentStyle
}
}

重点
逻辑的掌握
dom操作
定时器操作
错误的解决
定时器里面套定时器 ( 如果外面的执行时间要比里面的短会导致里面的定时器无法被清除 (定时器的作用范围内要清除对应的定时器) )
知识点的运用
封装 (函数封装抽取共同点)
同步和异步 (通过回调函数解决定时器是异步的事件也是异步的)
第三方动画的js
github地址 https://github.com/visionmedia/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

官网地址
https://animate.style/
swiper.js (封装轮播图)
https://www.swiper.com.cn/index.html

weixin_51421372

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day17 运动（下）

day17运动(下)
复制链接

扫一扫