異形滾動(dòng)效果圖.gif
1尽楔、原理的揭示
前言：圖片大小處理問題的解決阔馋，當(dāng)我們只改變盒子大小呕寝，圖片會(huì)溢出婴梧，無法充滿這個(gè)盒子塞蹭。設(shè)置圖片的寬高為 100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>異形滾動(dòng)</title>
<style>
.box {
width: 100px;
height: 100px;
}
img { //讓圖片充滿整個(gè)盒子
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box"><img src="images/0.jpg" alt=""></div>
</body>
</html>
從最低層的背景圖開始解析番电。五個(gè)顯示的圖，兩個(gè)隱藏的圖这刷。一個(gè)七個(gè)基本圖樣暇屋。
背景圖
思路：
- 放置背景圖片（li 絕對(duì)定位咐刨，再用圖片填充）
- 點(diǎn)擊時(shí)改變動(dòng)畫的 JSON
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>異形滾動(dòng)</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這個(gè)元素不會(huì)根據(jù)父親來設(shè)置寬度定鸟、高度仔粥，所以我們就要寫：*/
.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的優(yōu)化
- 獲取 targetJSON 使用數(shù)組接受 JSON放進(jìn)數(shù)組话告。
var JSONarr = [];
//把所有的狀態(tài)都推入數(shù)組：
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);
- 右按鈕的監(jiān)聽使用 for 進(jìn)行優(yōu)化沙郭，防止手寫病线。
//右按鈕的監(jiān)聽
rightBtn.onclick = function(){
//讓1鲤嫡、2暖眼、3诫肠、4、5惭缰、6元素都分別變?yōu)閿?shù)組中的0、1络凿、2、3虐先、4派敷、5的狀態(tài)
for(var i = 1 ; i <= 6 ; i++){
animate(lis[i],JSONarr[i - 1],600,"BounceEaseOut");
}
}
3篮愉、增加二次點(diǎn)擊效果
這里是個(gè)難點(diǎn)今天试躏，學(xué)了半天就是想不明白為什么不二次輪播，下午去吃了個(gè)飯泣刹，再仔細(xì)想想終于明白是怎么回事了椅您。
以右擊按鈕為例寡键，當(dāng)我們點(diǎn)擊的時(shí)候，圖片依據(jù) 動(dòng)畫 左移开伏。這里只是借助了動(dòng)畫改變了 li 的位置遭商，li 盒子的編號(hào)依然沒變巫玻，所以當(dāng)我們再次點(diǎn)擊盒子只是變到本身現(xiàn)在所處位置仍秤。我錯(cuò)就錯(cuò)在盒子轉(zhuǎn)移到另一個(gè)盒子可很，認(rèn)為他的盒子編號(hào)也隨之發(fā)生改變我抠。
想明白這點(diǎn)，我們就可以在動(dòng)畫完成后瓣窄，改變盒子編號(hào)俺夕。這樣下次的點(diǎn)擊效果就會(huì)生效劝贸。又因?yàn)槲覀兊玫降?li 是一個(gè)類數(shù)組對(duì)象不能通過pop等進(jìn)行操作悬荣。先把它放進(jìn)一個(gè)數(shù)組里氯迂。
var liArray = []; //存放每個(gè)li的數(shù)組 新增1
var JSONarr = [];
//把所有的狀態(tài)都推入數(shù)組：
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是一樣的結(jié)構(gòu)禁灼，lis是類數(shù)組對(duì)象轿曙，而liArray是數(shù)組 新增2
liArray.push(lis[i]);
}
//右按鈕的監(jiān)聽
rightBtn.onclick = function(){
//讓1导帝、2、3斋荞、4平酿、5悦陋、6元素都分別變?yōu)閿?shù)組中的0幸逆、1秉颗、2蚕甥、3菇怀、4爱沟、5的狀態(tài)
for(var i = 1 ; i <= 6 ; i++){
animate(liArray[i],JSONarr[i - 1],600,"BounceEaseOut");
}
//讓0號(hào)元素瞬移
for(var k in JSONarr[6]){
liArray[0].style[k] = JSONarr[6][k] + "px";
}
//交換身份：羯臁括享！新增3
liArray.push(liArray.shift());
}
4铃辖、設(shè)置節(jié)流娇斩，自動(dòng)輪播犬第，和opacity
設(shè)置 opacity 主要是兼容左右輪播時(shí)的淡入淡出歉嗓。
函數(shù)節(jié)流副签，因?yàn)樗械?li 盒子都是動(dòng)的遥椿，所以節(jié)流我們只需要隨便設(shè)置一個(gè)盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>異形滾動(dòng)</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這個(gè)元素不會(huì)根據(jù)父親來設(shè)置寬度淆储、高度冠场，所以我們就要寫：*/
.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是類數(shù)組對(duì)象惦界，getElementsByTagName得到的元素們是類數(shù)組對(duì)象隐绵，不是數(shù)組
//所以lis沒有pop方法装处、沒有unshift()方法击困！
var liArray = []; //存放每個(gè)li的數(shù)組
var JSONarr = [];
//把所有的狀態(tài)都推入數(shù)組：
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是一樣的結(jié)構(gòu)，lis是類數(shù)組對(duì)象，而liArray是數(shù)組
liArray.push(lis[i]);
}
//console.log(JSONarr);
//右按鈕的監(jiān)聽
rightBtn.onclick = rightBtnHandler;
var timer = setInterval(rightBtnHandler,2000);
yixing.onmouseover = function(){clearInterval(timer);};
yixing.onmouseout = function(){timer = setInterval(rightBtnHandler,2000);};
function rightBtnHandler(){
//節(jié)流
if(liArray[1].isanimated) return;
//讓1、2辞做、3童叠、4、5拼余、6元素都分別變?yōu)閿?shù)組中的0亭姥、1、2、3扶认、4、5的狀態(tài)
for(var i = 1 ; i <= 6 ; i++){
animate(liArray[i],JSONarr[i - 1],600,"BounceEaseOut");
}
//讓0號(hào)元素瞬移
for(var k in JSONarr[6]){
liArray[0].style[k] = JSONarr[6][k] + "px";
}
//交換身份！！
liArray.push(liArray.shift());
}
//左按鈕的監(jiān)聽
leftBtn.onclick = function(){
//節(jié)流
if(liArray[1].isanimated) return;
for(var i = 0 ; i <= 5 ; i++){
animate(liArray[i],JSONarr[i + 1],600,"BounceEaseOut");
}
//讓0號(hào)元素瞬移
for(var k in JSONarr[0]){
liArray[6].style[k] = JSONarr[0][k] + "px";
}
//交換身份Ｗ垡骸！
liArray.unshift(liArray.pop());
}
</script>
</body>
</html>
