前端小白案例-愛新鮮抽屜式特效制作
阿新 • • 發佈:2018-03-16
前端 源碼 小白 案例
知識點:企業布局技巧,如何高效的編寫CSS樣式,常用選擇器,基本標簽,動態布局,盒子模型,jquery類庫調用,JS特效編寫,JS編程思維等。
html代碼:
<div id="box"> <div class="item"> <img src="images/1.jpg" alt="美女" width="956" height="400"/><!--圖片四要素--> <div class="line">愛新鮮</div> </div> <div class="item"> <img src="images/2.jpg" alt="美女" width="956" height="400"/> <div class="line">一衣多穿</div> </div> <div class="item"> <img src="images/3.jpg" alt="美女" width="956" height="400"/> <div class="line">評測擂臺</div> </div> <div class="item"> <img src="images/4.jpg" alt="美女" width="956" height="400"/> <div class="line">達人心經</div> </div> <div class="item"> <img src="images/5.jpg" alt="美女" width="956" height="400"/> <div class="line">大咖賣場</div> </div> </div>
css代碼:
<style type="text/css"> /*CSS層疊樣式列表*/ *{margin:0px;padding:0px;}/*通配符 1.對所有元素增加其樣式 清楚所有默認內外邊距 2.解決不同瀏覽器的兼容問題*/ body{background:#000;/*背景顏色*/} #box{ width:1120px;/*寬度 px像素*/ height:400px;/*高度*/ background:#fff; margin:120px auto 0px;/*上 左右(auto自動相等) 下*/ position:relative;/*相對定位*/ overflow:hidden;/*超出部分隱藏*/ } #box .item{ position:absolute;/*絕對定位 一般找父級定位 是不區分絕對與相對的 意思就是說不管父級是絕對還是相對,都是可以當做參照物的 */ top:0px; left:0px; } #box .item .line{ width:20px; height:260px; background:#000; position:absolute; left:0px; top:0px; font-size:18px;/*文字大小*/ padding:140px 10px 0px; color:#fff;/*文字顏色*/ font-family:"微軟雅黑";/*文字樣式*/ cursor:pointer;/*鼠標樣式*/ opacity:0.8;/*CSS3 盒子透明 0-1*/ border-left:1px solid #fff;/*左邊框 粗細 樣式 顏色*/ } </style>
javascript代碼:
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var arr = [];//數組 var i=0; //each是自動循環的意思 JQ方法 [0,41,41*2,41*3,41*4] $("#box .item").each(function(i){//遍歷 $(this).css("left",i*41+"px"); arr[i] = i*41;//保存每一個item的left值 }); $("#box .item .line").click(function(){ var _index = $(this).parent().index();//獲取序列號 $("#box .item").each(function(i){ if (i<=_index) { //符合條件部分 $(this).animate({left:arr[i]+"px"},500); }else{ //不符合條件部分 $(this).animate({left:arr[i]+915+"px"},500); } }); }); </script>
前端小白案例-愛新鮮抽屜式特效制作