html异形轮播,异形滚动
異形滾動效果圖.gif
1、原理的揭示
前言：圖片大小處理問題的解決，當我們只改變盒子大小，圖片會溢出，無法充滿這個盒子。設置圖片的寬高為 100%
異形滾動.box {
width: 100px;
height: 100px;
}
img { //讓圖片充滿整個盒子
width: 100%;
height: 100%;
}
從最低層的背景圖開始解析。五個顯示的圖，兩個隱藏的圖。一個七個基本圖樣。
背景圖
思路：
放置背景圖片(li 絕對定位，再用圖片填充)
點擊時改變動畫的 JSON
異形滾動*{
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;
}
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");
}
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 盒子都是動的，所以節流我們只需要隨便設置一個盒子。
異形滾動*{
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;
}
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());
}
總結
以上是生活随笔為你收集整理的html异形轮播,异形滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python和pytorch是什么关系_
- 下一篇： halcon 将数据保存到excel_p