JQuery小案例
阿新 • • 發佈：2019-02-14
1.滑鼠移動到數字按鈕上後，圖片從有向左切入：
示例程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery案例練習</title> <style type="text/css"> /*清空所有的樣式*/ *{ margin:0; padding: 0; border:0; list-style:none; /*去掉ul和ol中的樣式*/ } .all執行效果：（如下圖所示，第5張圖片正在進入）{ width: 800px; height: 535px; margin: 100px auto; position: relative; /*子絕父相*/ overflow: hidden; } .all ul{ position: relative; /*子絕父相，它的子類通過絕對定位的方式讓圖片的原點和盒子的原點保持一致*/ z-index: 1; } /*通過定位的方式讓圖片的左上角位於盒子的左上角*/ .all ul li{ position: absolute; left: 0;/*用來確定圖片的位置*/ top:0; } /*Z-index 僅能在定位元素上奏效(例如 position:absolute;)!說明該屬性設定一個定位元素沿 z 軸的位置， * z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離使用者更近，為負數則表示離使用者更遠。 */ .all ol{ position: absolute; /*標準流中同級的ol和ul只能按順序顯示，不能讓ol顯示在ul之上，所以採用定位的方式*/ z-index: 2; /*2>1,讓ol顯示在ul之上*/ right: 20px;bottom: 10px; } .all ol li{ width: 20px; height: 20px; background-color: #333; border: 1px solid #cccccc; font-weight: bold; text-align: center; /*水平居中*/ line-height: 20px; /*垂直居中*/ float: left; /*讓所有ol裡面的li水平顯示*/ margin-left: 10px; /*li與li之間有一定的間距*/ color: #cccccc; /*字型的顏色*/ margin-top: 10px; /*解決current的方塊變大後，其他的色塊位置相對上移的問題*/ cursor: pointer; /*滑鼠移動到上面顯示小手*/ } .all ol .current{ width: 30px; height: 30px; color: #f60; /* 字型的顏色*/ border: 1px solid #ff6600; line-height: 30px; margin-top: 0; /*當前的色塊的margin-top為0，之前的為10，因為當前的色塊比之前的大了10px*/ } </style> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ var num2=6; //第一步，通過$符程式碼分離 $('ol li').mouseover(function(e){ //當滑鼠移動到ol裡面的li的時候，執行操作 $(this).attr('class','current'); //當前的li它的類變為current,也就是樣式發生變化 $(this).siblings().attr('class',''); //當前li的兄弟li的類置空 var num=$(this).index() //獲取到當前的ol li的index值 //因為讓圖片從右邊過來，所以一開始先讓它位於當前圖片的右側，也就是left值=圖片的width $('ul li').eq(num).css('left','800px'); num2++ $('ul li').eq(num).css('z-index',num2); //注意此處的num2是引數，不需要加'' $('ul li').eq(num).animate({left:'0'},500); }); }) </script> </head> <body> <div class="all"> <ul > <li><img src="images/04.png"></li> <li><img src="images/05.png"></li> <li><img src="images/06.png"></li> <li><img src="images/01.png"></li> <li><img src="images/02.png"></li> </ul> <ol> <!--裡面記得寫數字，不然就只有空的方塊了--> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li class="current">5</li> </ol> </div> </body> </html>
2.案例2（突出顯示某一部分內容）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>突出顯示某一部分</title> <style type="text/css"> *{ margin:0; padding:0; list-style: none; /*清空ul li 的樣式*/ } div{ margin:100px auto; width: 1204px; height: 580px; border: 2px solid #e3e3e3; } img{ width: 400px; height: 288px; float: left; /*margin-right: 20px;*/ /*margin-bottom: 20px;*/ padding: 10px; box-sizing: border-box; } </style> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ $('li').mouseover(function(e){ //當滑鼠移到某一個li的時候，該li的兄弟li的透明度降低 $(this).siblings().stop().fadeTo(500,0.3); //透明度在500m內淡入到0.3 }); // 當滑鼠移後，該li(this)的兄弟li的透明度恢復預設 $('li').mouseout(function(e){ //用stop()解決JQuery的排隊問題，也就是滑鼠快速的亂滑之後移開，狀態不會持續的進行 $(this).siblings().stop().fadeTo(500,1); //透明度恢復到預設值1 }); }) </script> </head> <body> <div> <ul> <li><a href="#"><img src="images/daiyu.png"></a></li> <li><a href="#"><img src="images/baochai.jpg"></a></li> <li><a href="#"><img src="images/xiangyun.jpg"></a></li> <li><a href="#"><img src="images/tanchun.jpg"></a></li> <li><a href="#"><img src="images/wangxifeng.jpg"></a></li> <li><a href="#"><img src="images/liwan.jpg"></a></li> </ul> </div> </body> </html>
執行效果：
1）頁面開啟後：
2）滑鼠移動到其中一幅圖上面，
3）當滑鼠離開後，又恢復到預設。
3.fadeIn() ：淡入
fadeOut()：淡出
fadeTo()
4.siblings() 獲取到兄弟類
5.stop() 解決JQuery排隊問題。