JS动画实现
- 在CSS3中可以通过transition过度属性实现动画
- JS可以利用CSS3中的transition属性实现元素动画
匀速动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画原理</title>
<style>
span {
position: absolute;
left: 0;
top: 100px;
display: block;
width: 150px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<button>点击张才走</button>
<span>张</span>
<script>
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
if (obj.offsetLeft > target) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + 2 + "px";
}
}, 30);
}
var span = document.querySelector("span");
var btn = document.querySelector("button");
btn.addEventListener("click",function (){
animate(span,1000);
})
</script>
</body>
</html>
缓速动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span {
position: absolute;
left: 0;
top: 100px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button>点击夏雨荷才走</button>
<span>夏雨荷</span>
<script>
// 缓动动画函数封装obj目标对象 target 目标位置
// 思路：
// 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
// 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
// 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
function animate(obj, target) {
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值写到定时器的里面
var step = Math.ceil((target - obj.offsetLeft) / 10);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
var span = document.querySelector('span');
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
// 调用函数
animate(span, 500);
})
// 匀速动画 就是 盒子是当前的位置 + 固定的值 10
// 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
</script>
</body>
</html>
轮播图制作
结构代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<script src="index.js"></script>
<script src="animate.js"></script>
</head>
<body>
<div class="banners">
<ul class="images">
<!-- 核心滚动区 -->
<li>
<a href="#"><img src="./images/banner.dpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/banner1.dpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/banner2.dpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/banner3.dpg" alt=""></a>
</li>
</ul>
<!-- 左箭头 -->
<a href="javascript:;" class="prev"> <</a>
<!-- 右箭头 -->
<a href="javascript:;" class="next"> ></a>
<!-- 小圆点 -->
<ul class="dots">
<!-- li 可用js动态生成-->
</ul>
</div>
</body>
</html>
css代码如下：
/* 1. 样式重置 */
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
/* 外层盒子样式,左右箭头和小圆点都要采用绝对定位，所以其父盒子要采用相对定位*/
.banners {
position: relative;
overflow: hidden;
width: 520px;
height: 280px;
margin: 100px auto;
}
/*滚动区 包裹所有图片的盒子 宽度要足够宽可以放下所有的图片*/
.images {
position: absolute;
top: 0;
left: 0;
width: 700%;
}
/* 对图片使用浮动 使其排列在一行*/
.images li{
float: left;
}
/* 图片大小会撑大盒子,设置图片大小 */
.banners img {
width: 520px;
height: 280px;
}
/*左右箭头相同样式*/
.prev,
.next {
display: none;
position: absolute;
/* 绝对定位的盒子垂直居中 */
top: 50%;
margin-top: -15px;
width: 20px;
height: 30px;
background: rgba(0,0,0, .3);
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
}
/*左箭头靠左定位*/
.prev {
left: 0;
/* 设置圆角 */
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
/*右箭头靠右定位*/
.next {
right: 0;
/* 设置圆角 */
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
/* 小圆点外层盒子的样式 */
.dots {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -35px;
height: 13px;
background:rgba(255,255,255, .3);
border-radius:7px;
}
/* 小圆点样式*/
.dots li {
float: left;
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: 3px;
}
/* 小圆点被点击的样式 */
.dots .active {
background-color: #ff5000;
}
轮播图功能如下：
1.鼠标经过轮播图，左右箭头显示，鼠标离开，左右箭头隐藏；
2.点击左右箭头，图片切换，底下的小圆点也会对应变化；
3.点击小圆点，也能实现切片图片功能；
4.鼠标不经过轮播图，自动播放；
5.鼠标经过轮播图，自动播放停止。
index.js文件如下：
window.addEventListener('load', function () {
//1. 获取元素
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var banners = document.querySelector('.banners')
//2. 鼠标经过，显示左右按钮
banners.addEventListener('mouseenter', function () {
prev.style.display = 'block';
next.style.display = 'block';
clearInterval(timer);
timer = null;//清除计时器
});
//3. 鼠标离开，隐藏左右按钮
banners.addEventListener('mouseleave', function () {
prev.style.display = 'none';
next.style.display = 'none';
timer = setInterval(function () {
// 轮播图自动切换 相当于点击右箭头
next.click();
}, 2000);
});
// 4. 动态生成小圆圈 有几张图片，就生成几个小圆圈
var images = document.querySelector('.images');
var dots = document.querySelector('.dots');
var banners_width = banners.offsetWidth;
for (var i = 0; i < images.children.length; i++) {
//创建一个小li
var li = document.createElement('li');
//记录当前小圆圈的索引号 通过创建自定义属性来做
li.setAttribute('index', i);
dots.appendChild(li);
//5. 小圆圈的排他思想 可以直接在生成小圆圈的同时直接绑定点击事件
li.addEventListener('click', function () {
for (var i = 0; i < dots.children.length; i++) {
dots.children[i].className = '';
}
this.className = 'active';
// 6. 点击小圆圈，移动图片，本质移动的是ul
//ul 的移动距离 就是小圆圈的索引号 * 图片的宽度 注意是负值
// 当我们点击了某个小li 就拿到它的index属性
var index = this.getAttribute('index');
//当我们点击了某个小li 就要把这个小li 的index给num
num = index;
circle = index;
animate(focus, -index * banners_width);
})
}
//把dots 里面的第一个小li设置类名为 active
dots.children[0].className = 'active';
// 实现滑动到最后一张照片时 可以平滑地过渡到第一张，克隆第一张图片 放在ul最后面，在其后克隆小圆点不会多
var first = images.children[0].cloneNode(true);
images.appendChild(first);
// 点击右侧按钮，图片滚动一张
var num = 0;
//circle 控制小圆圈的播放
var circle = 0;
next.addEventListener('click', function () {
// 如果走到了最后复制的一张图片，此时的ul要快速复原 left值改为零
if (num == images.children.length - 1) {
images.style.left = 0;
num = 0;
}
num++;
animate(images, -num * banners_width);
// 8. 点击右侧按钮，小圆圈跟随一起变化
circle++;
if (circle == dots.children.length) {
circle = 0;
}
circleChange();
})
//左侧按钮点击事件
prev.addEventListener('click', function () {
// 如果走到了最后复制的一张图片，此时的ul要快速复原 left值改为零
if (num == 0) {
num = images.children.length - 1;
images.style.left = -num * banners_width + 'px';
}
num--;
animate(images, -num * banners_width)
// 8. 点击右侧按钮，小圆圈跟随一起变化
circle--;
circle = circle < 0 ? dots.children.length - 1 : circle;
//调用函数
circleChange();
})
function circleChange() {
for (var i = 0; i < dots.children.length; i++) {
dots.children[i].className = '';
}
dots.children[circle].className = 'active';
}
var timer = setInterval(function () {
//手动调用点击事件
next.click();
}, 2000);
})
还需引入animate.js动画
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);
}
运行结果如下：
轮播图淡入淡出效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出效果</title>
<style>
* {
margin: 0;
padding: 0;
}
.banner {
width: 650px;
height: 360px;
border: 1px solid red;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.banner ul {
list-style: none;
width: 5000px;
height: 100%;
position: relative;
left: 0;
}
.banner ul li {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease 0s;
}
.banner ul li:first-child {
opacity: 1;
}
.banner ul li img {
width: 650px;
height: 360px;
}
.banner a {
text-decoration: none;
color: white;
text-align: center;
line-height: 50px;
}
.banner .left-btn {
position: absolute;
width: 50px;
height: 50px;
left: 20px;
top: 50%;
margin-top: -25px;
background-color: rgba(0, 0, 0, .5);
border-radius: 50%;
}
.banner .right-btn {
position: absolute;
width: 50px;
height: 50px;
right: 20px;
top: 50%;
margin-top: -25px;
background-color: rgba(0, 0, 0, .5);
border-radius: 50%;
}
</style>
</head>
<body>
<div id="banner" class="banner">
<ul id="list">
<li><img src="./images/banner.dpg" alt=""></li>
<li><img src="./images/banner1.dpg" alt=""></li>
<li><img src="./images/banner2.dpg" alt=""></li>
<li><img src="./images/banner3.dpg" alt=""></li>
</ul>
<a id="leftBtn" class="left-btn" href="javascript:;"><</a>
<a id="rightBtn" class="right-btn" href="javascript:;">></a>
</div>
<script>
var banner = document.querySelector("#banner");
var lis = document.querySelectorAll("#list li");
var leftBtn = document.querySelector("#leftBtn");
var rightBtn = document.querySelector("#rightBtn");
var index = 0;
var length = lis.length;
var lock = false;
rightBtn.onclick = function() {
if (lock) {
return;
}
lock = true;
lis[index].style.opacity = 0;
index++;
if (index >= length) {
index = 0;
}
lis[index].style.opacity = 1;
setTimeout(function() {
lock = false;
}, 1000);
};
leftBtn.onclick = function() {
if (lock) {
return;
}
lock = true;
lis[index].style.opacity = 0;
index--;
if (index < 0) {
index = length - 1;
}
lis[index].style.opacity = 1;
setTimeout(function() {
lock = false;
}, 1000);
};
</script>
</body>
</html>
运行结果如下：
7348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
