异形滚动效果图.gif
1、原理的揭示
前言：图片大小处理问题的解决，当我们只改变盒子大小，图片会溢出，无法充满这个盒子。设置图片的宽高为 100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异形滚动</title>
<style>
.box {
width: 100px;
height: 100px;
}
img { //让图片充满整个盒子
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box"><img src="images/0.jpg" alt=""></div>
</body>
</html>
从最低层的背景图开始解析。五个显示的图，两个隐藏的图。一个七个基本图样。
背景图
思路：
- 放置背景图片（li 绝对定位，再用图片填充）
- 点击时改变动画的 JSON
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异形滚动</title>
<style>
*{
margin: 0;
padding: 0;
}
.yixing{
width: 670px;
height: 221px;
background: url(images/pic_bg.gif);
margin: 100px auto;
border: 1px solid #000;
position: relative;
}
.yixing ul{
list-style: none;
}
.yixing ul li{
position: absolute;
}
/*img这个元素不会根据父亲来设置宽度、高度，所以我们就要写：*/
.yixing ul li img{
width: 100%;
height: 100%;
}
.yixing ul li.stateA{width: 55px;height: 37px;left:-55px;top: 84px;}
.yixing ul li.stateB{width: 71px;height: 54px;left:16px;top: 67px;}
.yixing ul li.stateC{width: 122px;height: 86px;left:104px;top: 35px;}
.yixing ul li.stateD{width: 161px;height: 112px;left:247px;top: 16px;}
.yixing ul li.stateE{width: 122px;height: 86px;left:436px;top: 35px;}
.yixing ul li.stateF{width: 71px;height: 54px;left:583px;top: 67px;}
.yixing ul li.stateG{width: 55px;height: 37px;left:678px;top: 84px;}
.rightBtn{
position: absolute;
top: 151px;
right: 20px;
width: 40px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<div class="yixing">
<ul>
<li class="stateA"><img src="images/number/0.png" alt="" /></li>
<li class="stateB"><img src="images/number/1.png" alt="" /></li>
<li class="stateC"><img src="images/number/2.png" alt="" /></li>
<li class="stateD"><img src="images/number/3.png" alt="" /></li>
<li class="stateE"><img src="images/number/4.png" alt="" /></li>
<li class="stateF"><img src="images/number/5.png" alt="" /></li>
<li class="stateG"><img src="images/number/6.png" alt="" /></li>
</ul>
<div class="btns">
<a href="javascript:;" id="rightBtn" class="rightBtn"></a>
</div>
</div>
<script type="text/javascript" src="js/animate-2.0.1.js"></script>
<script type="text/javascript">
var lis = document.getElementsByTagName("li");
var rightBtn = document.getElementById("rightBtn");
var JSONC = {"width": 122,"height": 86,"left":104,"top": 35};
var JSOND = {"width": 161,"height": 112,"left":247,"top": 16};
//理论上我们可以不厌其烦写JSONA、JSONB
rightBtn.onclick = function(){
//理论上我们可以不厌其烦写
animate(lis[3],JSONC,1000,"BounceEaseOut");
animate(lis[4],JSOND,1000,"BounceEaseOut");
}
</script>
</body>
</html>
2、JSON的优化
- 获取 targetJSON 使用数组接受 JSON放进数组。
var JSONarr = [];
//把所有的状态都推入数组：
for(var i = 0 ; i < lis.length ; i++){
JSONarr.push({
"width" : parseInt(fetchComputedStyle(lis[i],"width")),
"height" : parseInt(fetchComputedStyle(lis[i],"height")),
"left" : parseInt(fetchComputedStyle(lis[i],"left")),
"top" : parseInt(fetchComputedStyle(lis[i],"top"))
});
}
console.log(JSONarr);
- 右按钮的监听使用 for 进行优化，防止手写。
//右按钮的监听
rightBtn.onclick = function(){
//让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态
for(var i = 1 ; i <= 6 ; i++){
animate(lis[i],JSONarr[i - 1],600,"BounceEaseOut");
}
}
3、增加二次点击效果
这里是个难点今天，学了半天就是想不明白为什么不二次轮播，下午去吃了个饭，再仔细想想终于明白是怎么回事了。
以右击按钮为例，当我们点击的时候，图片依据 动画 左移。这里只是借助了动画改变了 li 的位置，li 盒子的编号依然没变，所以当我们再次点击盒子只是变到本身现在所处位置。我错就错在盒子转移到另一个盒子，认为他的盒子编号也随之发生改变。
想明白这点，我们就可以在动画完成后，改变盒子编号。这样下次的点击效果就会生效。又因为我们得到的 li 是一个类数组对象不能通过pop等进行操作。先把它放进一个数组里。
var liArray = []; //存放每个li的数组 新增1
var JSONarr = [];
//把所有的状态都推入数组：
for(var i = 0 ; i < lis.length ; i++){
JSONarr.push({
"width" : parseInt(fetchComputedStyle(lis[i],"width")),
"height" : parseInt(fetchComputedStyle(lis[i],"height")),
"left" : parseInt(fetchComputedStyle(lis[i],"left")),
"top" : parseInt(fetchComputedStyle(lis[i],"top")),
"opacity" : parseInt(fetchComputedStyle(lis[i],"opacity"))
});
//liArray就和lis是一样的结构，lis是类数组对象，而liArray是数组 新增2
liArray.push(lis[i]);
}
//右按钮的监听
rightBtn.onclick = function(){
//让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态
for(var i = 1 ; i <= 6 ; i++){
animate(liArray[i],JSONarr[i - 1],600,"BounceEaseOut");
}
//让0号元素瞬移
for(var k in JSONarr[6]){
liArray[0].style[k] = JSONarr[6][k] + "px";
}
//交换身份！！新增3
liArray.push(liArray.shift());
}
4、设置节流，自动轮播，和opacity
设置 opacity 主要是兼容左右轮播时的淡入淡出。
函数节流，因为所有的 li 盒子都是动的，所以节流我们只需要随便设置一个盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异形滚动</title>
<style>
*{
margin: 0;
padding: 0;
}
.yixing{
width: 670px;
height: 221px;
background: url(images/pic_bg.gif);
margin: 100px auto;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
.yixing ul{
list-style: none;
}
.yixing ul li{
position: absolute;
opacity: 1;
filter:alpha(opacity=100);
}
/*img这个元素不会根据父亲来设置宽度、高度，所以我们就要写：*/
.yixing ul li img{
width: 100%;
height: 100%;
}
.yixing ul li.stateA{width: 55px;height: 37px;left:-55px;top: 84px; opacity: 0; filter:alpha(opacity=0);}
.yixing ul li.stateB{width: 71px;height: 54px;left:16px;top: 67px;}
.yixing ul li.stateC{width: 122px;height: 86px;left:104px;top: 35px;}
.yixing ul li.stateD{width: 161px;height: 112px;left:247px;top: 16px;}
.yixing ul li.stateE{width: 122px;height: 86px;left:436px;top: 35px;}
.yixing ul li.stateF{width: 71px;height: 54px;left:583px;top: 67px;}
.yixing ul li.stateG{width: 55px;height: 37px;left:678px;top: 84px; opacity: 0;filter:alpha(opacity=0);}
.rightBtn{
position: absolute;
top: 151px;
right: 20px;
width: 40px;
height: 40px;
background-color: red;
}
.leftBtn{
position: absolute;
top: 151px;
left: 20px;
width: 40px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<div class="yixing" id="yixing">
<ul>
<li class="stateA"><img src="images/number/0.png" alt="" /></li>
<li class="stateB"><img src="images/number/1.png" alt="" /></li>
<li class="stateC"><img src="images/number/2.png" alt="" /></li>
<li class="stateD"><img src="images/number/3.png" alt="" /></li>
<li class="stateE"><img src="images/number/4.png" alt="" /></li>
<li class="stateF"><img src="images/number/5.png" alt="" /></li>
<li class="stateG"><img src="images/number/6.png" alt="" /></li>
</ul>
<div class="btns">
<a href="javascript:;" id="leftBtn" class="leftBtn"></a>
<a href="javascript:;" id="rightBtn" class="rightBtn"></a>
</div>
</div>
<script type="text/javascript" src="js/animate-2.0.1.js"></script>
<script type="text/javascript" src="js/fetchComputedStyle.js"></script>
<script type="text/javascript">
var yixing = document.getElementById("yixing");
var rightBtn = document.getElementById("rightBtn");
var leftBtn = document.getElementById("leftBtn");
var lis = document.getElementsByTagName("li");
//lis是类数组对象，getElementsByTagName得到的元素们是类数组对象，不是数组
//所以lis没有pop方法、没有unshift()方法！
var liArray = []; //存放每个li的数组
var JSONarr = [];
//把所有的状态都推入数组：
for(var i = 0 ; i < lis.length ; i++){
JSONarr.push({
"width" : parseInt(fetchComputedStyle(lis[i],"width")),
"height" : parseInt(fetchComputedStyle(lis[i],"height")),
"left" : parseInt(fetchComputedStyle(lis[i],"left")),
"top" : parseInt(fetchComputedStyle(lis[i],"top")),
"opacity" : parseInt(fetchComputedStyle(lis[i],"opacity"))
});
//liArray就和lis是一样的结构，lis是类数组对象，而liArray是数组
liArray.push(lis[i]);
}
//console.log(JSONarr);
//右按钮的监听
rightBtn.onclick = rightBtnHandler;
var timer = setInterval(rightBtnHandler,2000);
yixing.onmouseover = function(){clearInterval(timer);};
yixing.onmouseout = function(){timer = setInterval(rightBtnHandler,2000);};
function rightBtnHandler(){
//节流
if(liArray[1].isanimated) return;
//让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态
for(var i = 1 ; i <= 6 ; i++){
animate(liArray[i],JSONarr[i - 1],600,"BounceEaseOut");
}
//让0号元素瞬移
for(var k in JSONarr[6]){
liArray[0].style[k] = JSONarr[6][k] + "px";
}
//交换身份！！
liArray.push(liArray.shift());
}
//左按钮的监听
leftBtn.onclick = function(){
//节流
if(liArray[1].isanimated) return;
for(var i = 0 ; i <= 5 ; i++){
animate(liArray[i],JSONarr[i + 1],600,"BounceEaseOut");
}
//让0号元素瞬移
for(var k in JSONarr[0]){
liArray[6].style[k] = JSONarr[0][k] + "px";
}
//交换身份！！
liArray.unshift(liArray.pop());
}
</script>
</body>
</html>
