实现效果
代码
html
<!-- 手风琴特效S -->
<div class="wrap" id="wrap">
<h1>手风琴特效</h1>
<div class="slide" id="slide">
<ul>
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:" id="next"></a>
<a href="javascript:" id="prev"></a>
</div>
</div>
</div>
<!-- 手风琴特效E -->
css
/* 手风琴特效S */
.warp {
width: 1000px;
margin: 10px auto;
border: 1px solid red;
}
.slide {
height: 200px;
margin: 100px auto;
position: relative;
}
.slide li {
position: absolute;
left: 200px;
top: 0;
}
.slide li img {
width: 100%;
border: 0;
vertical-align: top;
}
ul {
list-style: none;
}
.arrow {
opacity: 0;
}
.prev,
.next {
width: 76px;
height: 112px;
position: absolute;
top: 50%;
margin-top: -56px;
z-index: 999;
}
.next {
right: 0;
}
.wrap {
margin: 150px auto;
width: 1200px;
}
.wrap h1 {
margin-top: 30px;
}
.slide {
height: 500px;
position: relative;
}
.slide li {
position: absolute;
left: 200px;
top: 0;
}
.slide li img {
width: 100%;
}
.arrow {
opacity: 0;
}
#next,
#prev {
width: 76px;
height: 112px;
position: absolute;
top: 50%;
margin-top: -56px;
background: url("../img/prev.jpg") no-repeat;
z-index: 99;
}
#next {
background-image: url("../img/next.jpg");
right: 0;
}
/* 手风琴特效E */
js
/ 手风琴特效S
function my$(id) {
return document.getElementById(id);
}
/*
* element---任意的元素
* attr---属性
* */
function getAttrValue(element, attr) {
return element.currentStyle
? element.currentStyle[attr]
: window.getComputedStyle(element, null)[attr] || 0;
}
//动画函数
function animate(element, json, fn) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var flag = true; //假设都达到了目标
for (var attr in json) {
if (attr == "opacity") {
//判断属性是不是opacity
var current = getAttrValue(element, attr) * 100;
//每次移动多少步
var target = json[attr] * 100; //直接赋值给一个变量,后面的代码都不用改
var step = (target - current) / 10; //(目标-当前)/10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current = current + step;
element.style[attr] = current / 100;
} else if (attr == "zIndex") {
//判断属性是不是zIndex
element.style[attr] = json[attr];
} else {
//普通的属性
//获取当前的位置----getAttrValue(element,attr)获取的是字符串类型
var current = parseInt(getAttrValue(element, attr)) || 0;
//每次移动多少步
var target = json[attr]; //直接赋值给一个变量,后面的代码都不用改
var step = (target - current) / 10; //(目标-当前)/10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current = current + step;
element.style[attr] = current + "px";
}
if (current != target) {
flag = false; //如果没到目标结果就为false
}
}
if (flag) {
//结果为true
clearInterval(element.timeId);
if (fn) {
//如果用户传入了回调的函数
fn(); //就直接的调用,
}
}
console.log("target:" + target + "current:" + current + "step:" + step);
}, 10);
}
var config = [
{
width: 400,
opacity: 0.2,
height: 250,
left: 50,
top: 20,
zIndex: 2,
}, //0
{
width: 600,
opacity: 0.7,
height: 350,
left: 0,
top: 70,
zIndex: 3,
}, //1
{
width: 800,
opacity: 1,
height: 500,
left: 200,
top: 100,
zIndex: 4,
}, //2
{
width: 600,
opacity: 0.7,
height: 350,
left: 600,
top: 70,
zIndex: 3,
}, //3
{
width: 400,
opacity: 0.2,
height: 250,
left: 750,
top: 20,
zIndex: 2,
}, //4
];
//页面加载事件
window.onload = function () {
var flag = true; //默认所有的动画都结束了
//获取li标签
var list = my$("slide").getElementsByTagName("li");
//散开图片
function assign() {
for (var i = 0; i < list.length; i++) {
animate(list[i], config[i], function () {
flag = true; //回调函数,当动画加载完后,flag变为true
});
}
}
assign();
//点击右边焦点
my$("next").onclick = function () {
if (flag) {
flag = false;
config.push(config.shift()); //把数组中的第一个元素作为返回值并追加加到这个数组的最后面
assign();
}
};
//点击左边焦点
my$("prev").onclick = function () {
if (flag) {
flag = false;
config.unshift(config.pop()); //把数组的最后一个元素作为返回值并追加到这个数组的最前面
assign();
}
};
//鼠标进入逐渐的显示左右焦点
my$("slide").onmouseover = function () {
animate(my$("arrow"), { opacity: 1 });
};
//鼠标离开隐藏
my$("slide").onmouseout = function () {
animate(my$("arrow"), { opacity: 0 });
};
};
// 手风琴特效E