jQuery最後案例:商標展示
阿新 • • 發佈:2019-01-06
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>案例-品牌選擇</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <style type="text/css"> body{ font-family: "Microsoft YaHei"; text-align: center; } #mainDiv { width: 100%; text-align: center; margin-top:10px; } .divRow { text-align: center; margin-left: auto; margin-right: auto; width:736px; } .divColumn { width:104px; height:38px; color: #005aa0; border: solid 1px #b9b9b9; font-size:14px; float:left; margin: 0 -1 -1 0; text-align: center; cursor: pointer; } .divColumn a { height: 36px; line-height: 36px; overflow: hidden; padding: 0; position: relative; white-space: nowrap; width: 102px; display: inline-block; } .divColumn img { display: block; height: 36px; position: absolute; width:102px; z-index:1; left:0; top:0; } .hover { color: #e4393c; border: solid 1px #e4393c; position: relative; } .more,.fold { font-size: 12px; color: #005aa0; cursor: pointer; } .more b{ background: rgba(0,0,0,0) url("images/down.gif") no-repeat; height: 5px; overflow: hidden; position: absolute; width: 7px; margin:6 0 0 3; } .fold b{ background: url("images/up.gif"); } .cGreen{background-color: #4CA902} .cPink{background-color: #ED4A9F} .cBlue{background-color: #0092E7} .cCyan{background-color: #01A6A2} .cYellow{background-color: #DCA112} .cRed{background-color: #B7103B} .cPurple{background-color: #792F7C} .cBlack{background-color: #110F10} .cOrange{background-color: #FF4500} .cGray{background-color: #A9A9A9} .hide{display: none;} </style> <script type="text/javascript"> $(document).ready(function(){ //1、進入頁面時第二行的品牌不可見 $(".divColumn:gt(6)").hide(); //2、更多的點選事件 $(".more").on("click", function(){ var $moreDiv = $(this); if($moreDiv.hasClass("fold")){ //2.2、當顯示的是 收起 的時候 //2.2.1、將 收起 改成 更多 $moreDiv.find("span").html("更多<b></b>"); //2.2.2、將向上的箭頭改成向下的箭頭 $moreDiv.removeClass("fold"); //2.2.3、隱藏第二行資料 $(".divColumn:gt(6)").hide(); } else { //2.1、當顯示的是 更多 的時候 //2.1.1、將 更多 改成 收起 $moreDiv.find("span").html("收起<b></b>"); //2.1.2、將向下的箭頭改成向上的箭頭 $moreDiv.addClass("fold"); //2.1.3、顯示第二行資料 $(".divColumn:gt(6)").show(); } }); //3、當滑鼠在品牌上和離開品牌的時候樣式的變化 $(".divColumn").hover(function(){ //3.1、滑鼠在品牌上 //3.1.1、隱藏品牌圖片 $(this).find("img").hide(); //3.1.2、改變品牌樣式(字型和邊框) $(this).addClass("hover"); }, function(){ //3.2、滑鼠離開品牌的時候 //3.2.1、顯示品牌圖片 $(this).find("img").show(); //3.2.2、改變品牌樣式(字型和邊框) $(this).removeClass("hover"); }); }); </script> </head> <body> <div id="mainDiv"> <div class="divRow"> <div class="divColumn"> <a><img alt="華為" src="images/huawei.jpg">華為</a> </div> <div class="divColumn"> <a><img alt="小米" src="images/xiaomi.jpg">小米</a> </div> <div class="divColumn"> <a><img alt="三星" src="images/samsung.jpg">三星</a> </div> <div class="divColumn"> <a><img alt="蘋果" src="images/apple.jpg">蘋果</a> </div> <div class="divColumn"> <a><img alt="魅族" src="images/meizu.jpg">魅族</a> </div> <div class="divColumn"> <a><img alt="諾基亞" src="images/nokia.png">諾基亞</a> </div> <div class="divColumn"> <a><img alt="vivo" src="images/vivo.png">vivo</a> </div> <div class="divColumn"> <a>OPPO</a> </div> <div class="divColumn"> <a>BlackBerry</a> </div> <div class="divColumn"> <a>努比亞</a> </div> <div class="divColumn"> <a>聯想</a> </div> <div class="divColumn"> <a>索尼</a> </div> <div class="divColumn"> <a>酷派</a> </div> <div class="divColumn"> <a>HTC</a> </div> </div> <div class="more"><span>更多<b></b></span></div> </div> </body> </html>
其中需要的圖片請大家自行尋找!