js实现切换图片时淡入淡出
2017-09-08 本文已影响0人
江海大初学者
废话不说，直接看需求。我们的界面要做成这样，如下图。
图1
当我们点击上边的yab时，可以随意切换图片，并实现淡入淡出。那么要怎样才能实现呢，我们先布局，然后将所有的图片通过定位属性重叠到一起，假设我们点击的是图片而，那么我们将第二张图片的opacity设为1，其他的设为0，0-1，1-0设置一个过度即可。之前我们封装过一个函数，所以我们会直接拿过来使用。
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片的淡入淡出</title>
<script src="utils.js"></script>
<script src="fade.js"></script>
<link rel="stylesheet" href="fade.css">
</head>
<body>
<div id="box">
<div id="tab">
<a class="blackbg" href="javascript:">图片1</a>
<a class="whitebg" href="javascript:">图片2</a>
<a class="whitebg" href="javascript:">图片3</a>
<a class="whitebg" href="javascript:">图片4</a>
</div>
<div id="imgList">
</div>
</div>
</body>
</html>
css代码
* {
margin: 0;
padding: 0;
}
a {
text-align: center;
color: #000;
text-decoration: none;
}
#box {
width: 400px;
height: 250px;
margin: 100px auto;
}
#imgList {
position: relative;
}
#imgList img {
width: 400px;
height: 250px;
position: absolute;
left: 0;
top: 0;
}
#tab a {
display: inline-block;
width: 96px;
text-align: center;
line-height: 34px;
}
.firstImg {
z-index: 9;
}
.blackbg {
background: #000;
color: #fff;
}
.whitebg {
background: #fff;
color: #000;
}
js代码
//fade.js ↓↓↓↓↓
window.onload = function () {
let tab = $("tab");
let tabChildren = tab.children;
let imgList = $("imgList");
let imgListChildren = imgList.children;
for (let i = 0; i < tabChildren.length; i++) {
tabChildren[i].addEventListener("click", function () {
tabChildren[i].className = "blackbg";
MotionUtils.fadein(imgListChildren[i]);
for (let j = 0; j < tabChildren.length; j++) {
if (j !== i) {
tabChildren[j].className = "whitebg";
MotionUtils.fadeout(imgListChildren[j]);
}
}
});
}
}
//utils.js ↓↓↓↓↓
function $(id) {
return document.getElementById(id);
}
function getStyle(element, attr) {
let result = element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element, null)[attr];
return Number.parseFloat(result);
}
let MotionUtils = {
/**
*
* @param obj 要改变的对象
* @param attr 要改变的对象的属性
* @param finalValue 要改变对象的属性的最大值
* @param callback 在上一次运动完后下一次要运动的函数，回调自己
*/
bufferMove: function (obj, data, callback) {
//清除旧定时器
clearInterval(obj.timer);
//开启新定时器
obj.timer = setInterval(function () {
//flg标识运动是否完毕
let flg = true;
for (let attr in data) {
//获得当前obj属性值
let currentValue;
if (attr === "opacity") {
currentValue = Number.parseFloat(getStyle(obj, attr)) * 100;
} else {
currentValue = Number.parseInt(getStyle(obj, attr));
}
//计算速度
let speed = (data[attr] - currentValue) / 8;
//计算物体运动方向
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//计算下一次obj的属性值
let nextValue = currentValue + speed;
//设置属性值
if (attr === "opacity") {
obj.style[attr] = nextValue / 100;
obj.style.filter = "alpha(opacity=" + nextValue + ")";
} else {
obj.style[attr] = nextValue + "px";
}
//判断当前属性是否运动完毕
if (nextValue !== data[attr]) {
flg = false;
}
}
//清除定时器
if (flg) {
clearInterval(obj.timer);
//如果传了callback，那么就执行这个函数
if (callback) {
callback();
}
}
}, 50);
},
fadein: function (element) {
let speed = 0.1;
clearInterval(element.timer);
element.timer = setInterval(function () {
let currentOpacity = Number(getStyle(element, "opacity"));
if (currentOpacity < 1) {
element.style.opacity = currentOpacity + speed;
}
if (currentOpacity >= 1) {
element.style.opacity = 1;
clearInterval(element.timer);
}
}, 50);
},
fadeout: function (element) {
let speed = 0.1;
clearInterval(element.timer);
element.timer = setInterval(function () {
let currentOpacity = Number(getStyle(element, "opacity"));
if (currentOpacity > 0) {
element.style.opacity = currentOpacity - speed;
}
if (currentOpacity <= 0) {
element.style.opacity = 0;
clearInterval(element.timer);
}
}, 50);
}
}
好了，我们就完成了。
