jQuery箭頭切換圖片 佈局 3d位移 變形原點 jQuery transform：translate3d（x,y,z）； x 代表橫向坐標移向量的長度 y 代表縱向坐標移向量的長度 z 代表Z軸移向量的長度 取值不可為百 scale（） 縮放 transform-origin：0 50%； to ...
jQuery箭頭切換圖片
- 佈局
- 3d位移 變形原點
- jQuery
transform：translate3d（x,y,z）；
x 代表橫向坐標移向量的長度
y 代表縱向坐標移向量的長度
z 代表Z軸移向量的長度 取值不可為百
scale（） 縮放
transform-origin：0 50%；
top left | left top 等價於 0 0
top | top center | center top 等價於 50% 0
right top | top right 等價於 100% 0
left | left center | center left 等價於 0 50%
center | center center 等價於 50% 50%（預設值）
right | right center | center right 等價於 100% 50%
bottom left | left bottom 等價於 0 100%
bottom | bottom center | center bottom 等價於 50% 100%
bottom right | right bottom 等價於 100% 100%
left,center right是水平方向取值，對應的百分值為left=0%;center=50%;right=100%
top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%；
HTML 部分
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery箭頭按鈕切換圖片</title> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> </head> <body> <div class="box"> <div class="list"> <ul> <li class="p7"><a href="#"><img src="img/1.png" alt="" /></a></li> <li class="p6"><a href="#"><img src="img/2.png" alt="" /></a></li> <li class="p5"><a href="#"><img src="img/3.png" alt="" /></a></li> <li class="p4"><a href="#"><img src="img/44.jpg" alt="" /></a></li> <li class="p3"><a href="#"><img src="img/55.jpg" alt="" /></a></li> <li class="p2"><a href="#"><img src="img/66.jpg" alt="" /></a></li> <li class="p1"><a href="#"><img src="img/77.jpg" alt="" /></a></li> </ul> </div> <a href="javascript:;" class="prev btn"><</a> <a href="javascript:;" class="next btn">></a> </div> </body> </html>
CSS 部分
<style type="text/css"> *{ margin: 0; padding: 0; } .box{ margin-top: 80px; width: 100%; height: 340px; position: relative; /* 相對定位 */ } .list{ width: 1200px; height: 300px; overflow: hidden; position: absolute; left: 50%; margin-left: -600px; } .btn{ position: absolute; /* 絕對定位 */ top: 50%; margin-top: -50px; width: 60px; height: 100px; line-height: 100px; /* 行高 */ font-size: 30px; color: white; text-decoration: none; /* 文本修飾 */ text-align: center; background: rgba(0,255,0,.5); cursor: pointer; /* 游標的樣式 改為手指 */ } .next{ right: 0; } li{ position: absolute; top: 0; left: 0; list-style: none; opacity: 0; transition: all 0.3s ease-out; } img{ width: 751px; height: 300px; border:none; float: left; } .p1{ transform:translate3d(-224px,0,0) scale(0.81); /* 3d位移 x,y,z x 代表橫向坐標移向量的長度 y 代表縱向坐標移向量的長度 z 代表Z軸移向量的長度 取值不可為百分比 */ } .p2{ transform:translate3d(0px,0,0) scale(0.81); transform-origin:0 50%; /* 變形原點 */ /* top left | left top 等價於 0 0 top | top center | center top 等價於 50% 0 right top | top right 等價於 100% 0 left | left center | center left 等價於 0 50% center | center center 等價於 50% 50%（預設值） right | right center | center right 等價於 100% 50% bottom left | left bottom 等價於 0 100% bottom | bottom center | center bottom 等價於 50% 100% bottom right | right bottom 等價於 100% 100% */ /* left,center right是水平方向取值，對應的百分值為left=0%;center=50%;right=100% top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%; 如果只取一個值，表示垂直方向值不變。 */ opacity: 0.8; z-index: 2; } .p3{ transform:translate3d(224px,0,0) scale(1); z-index: 3; opacity: 1; } .p4{ transform:translate3d(449px,0,0) scale(0.81); transform-origin:100% 50%; opacity: 0.8; z-index: 2; } .p5{ transform:translate3d(672px,0,0) scale(0.81); } .p6{ transform:translate3d(896px,0,0) scale(0.81); } .p7{ transform:translate3d(1120px,0,0) scale(0.81); } </style>
JavaScript 部分
<script type="text/jscript"> var cArr=["p7","p6","p5","p4","p3","p2","p1"]; var index=0; $(".next").click( //下一張 function(){ nextimg(); } ) $(".prev").click( //上一張 function(){ previmg(); } ) //上一張 function previmg(){ cArr.unshift(cArr[6]); //向數組的開頭添加一個或更多元素 並返回新的長度 cArr.pop(); //移除最後一個元素 //i是元素的索引，從0開始 //e為當前處理的元素 //each迴圈，當前處理的元素移除所有的class，然後添加數組索引i的class $("li").each(function(i,e){ $(e).removeClass().addClass(cArr[i]); }) index--; if (index<0) { index=6; } show(); } //下一張 function nextimg(){ cArr.push(cArr[0]); //向數組的末尾添加一個或更多元素 並返回新的長度 cArr.shift(); //刪除元素數組中的第一個值 並返回 $("li").each(function(i,e){ $(e).removeClass().addClass(cArr[i]); }) index++; if (index>6) { index=0; } show(); } </script>
此文到此結束
此文參考 http://www.w3cplus.com/css3/css3-3d-transform.html
