web前端基礎案例：圖片隨機切換特效
阿新 • • 發佈：2019-01-05
知識點：靜態佈局技巧，定位，浮動，背景設定，CSS樣式選擇器，JS特效，JQ庫呼叫，隨機函式運用。
html程式碼：
css程式碼：<body><!--身體 視覺化標籤--> <!--div盒子模型標籤 寬度 高度 位置 邊框 背景--> <div id="box"><!--id="自定義的名稱" 唯一的(身份證號) 命名規範(見名知義:用有語義的英文單詞)--> <ul><!--無序列表標籤--> <li> <div class="top1"> <img src="images/1.jpg"> <img src="images/2.jpg"> </div> <div class="bottom1"> <img src="images/3.jpg"> <img src="images/4.jpg"> </div> </li> <li> <div class="top2"> <img src="images/5.jpg"> <img src="images/6.jpg"> </div> <div class="center"> <img src="images/7.jpg"> <img src="images/8.jpg"> </div> <div class="bottom2"> <img src="images/9.jpg"> <img src="images/10.jpg"> </div> </li> <li class="last"><!--class 可重複的(姓名)--> <div class="top3"> <img src="images/11.jpg"> <img src="images/12.jpg"> </div> <div class="bottom3"> <img src="images/13.jpg"> <img src="images/14.jpg"> </div> </li> </ul> </div>
javascript程式碼：<style>/* css樣式 */ /* 第一步:找到對應的標籤元素 第二步:設定相應的屬性 */ *{/* 通用選擇器:選擇到所有的標籤元素*/ margin:0;/* 外邊距 */ padding:0;/* 內邊距 */ } #box{/* # id選擇器*/ width:1120px;/*寬度*/ height:600px;/*高度*/ background:#aaa;/*背景顏色*/ margin:100px auto;/*上下100px 左右自動(居中)*/ } #box ul li{/*混合選擇器*/ list-style:none;/*去除前面的小黑圓點*/ width:350px; height:600px; /*background:blue;*/ float:left;/*左浮動:與父元素的左端對齊依次的往右端顯示*/ margin-right:10px; } #box ul li.last{/* . class類選擇器*/ width:400px; margin:0; } #box ul li div{ position:relative;/*相對定位:參考物*/ width:100%;/* 與父元素的寬度一樣*/ overflow:hidden;/*超出隱藏*/ } .top1{ height:250px; margin-bottom:10px; } .bottom1{ height:340px; } .top2{ height:180px; margin-bottom:10px; } .center{ height:220px; margin-bottom:10px; } .bottom2{ height:180px; } .top3{ height:340px; margin-bottom:10px; } .bottom3{ height:250px; } #box ul li div img{ position:absolute;/*絕對定位:定位元素 */ left:0;/*距離參考物左端的距離*/ top:0;/*距離參考物上端的距離*/ opacity:1;/*透明度*/ } </style>
<script src="js/jquery-1.11.3.min.js"></script> <script> //alert($);//彈出jq的代理函式$ //$("#box ul li div") 選擇到所有的小盒子 var w = 0;//定義一個變數來儲存寬度 var h = 0;//定義一個變數來儲存高度 var direction = [];//定義一個數組來儲存移動的方向 $("#box ul li div").hover(function(){//滑鼠移上去實現什麼功能 //獲取每個滑鼠移上去的元素的寬高 //$(this) 滑鼠移到誰上面就指代誰 w = $(this).width(); h = $(this).height(); direction = [ { "top" : -h + "px","opacity" : 0},//上 { "top" : h + "px","opacity" : 0 },//下 { "left" : -w + "px","opacity" : 0},//左 {"left" : w + "px","opacity" : 0 }//右 ]; //做一個隨機數 },function(){//滑鼠移開實現什麼功能 //Math.random() 生成一個0-1之間的隨機小數 //Math.floor 向下取整 3.99 3 var n = Math.floor(Math.random()*4);//0-3 //eq(1) 找到第二張 //animate({需要改變的屬性名:屬性值},動畫執行的時間,function(){})自定義動畫 $(this).find("img").eq(1).animate(direction[n],1000,function(){//動畫完成之後再執行什麼功能 $(this).css({ "left" : 0, "top" : 0, "opacity" : 1 }) $(this).prependTo($(this).parent()); }); }); </script>
想學習web前端或者正在學習web前端的小夥伴可以來我的前端群，575308719，有視訊、原始碼、學習方法等大量乾貨分享。
