效果圖 floor.html <!DOCTYPE html> <html lang="zh-CN"><!-- 設置簡體中文 --> <head> <meta charset="UTF-8"> <title>floor</title> <link rel="stylesheet" href="../c ...
效果圖
floor.html
<!DOCTYPE html> <html lang="zh-CN"><!-- 設置簡體中文 --> <head> <meta charset="UTF-8"> <title>floor</title> <link rel="stylesheet" href="../css/base.css"> <link rel="stylesheet" href="../css/floor.css"> </head> <body> <!-- 1F --> <div class="floor"> <div class="container"> <img src="../img/floor-loading.gif"> </div> </div> <!-- 2F一 --> <div class="floor"> <div class="container"> <img src="../img/floor-loading.gif"> </div> </div> <!-- 3F --> <div class="floor" > <div class="container"> <img src="../img/floor-loading.gif"> </div> </div> <!-- 4F --> <div class="floor"> <div class="container"> <img src="../img/floor-loading.gif"> </div> </div> <!-- 5F --> <div class="floor"> <div class="container"> <img src="../img/floor-loading.gif"> </div> </div> <!-- elevator --> <div class="elevator container" id="elevator"> <a href="javascript:;" class="elevator-item"> <span class="elevator-num">F1</span> <span class="elevator-text">服飾</span> </a> <a href="javascript:;" class="elevator-item"> <span class="elevator-num">F2</span> <span class="elevator-text">美妝</span> </a> <a href="javascript:;" class="elevator-item"> <span class="elevator-num">F3</span> <span class="elevator-text">手機</span> </a> <a href="javascript:;" class="elevator-item"> <span class="elevator-num">F4</span> <span class="elevator-text">家電</span> </a> <a href="javascript:;" class="elevator-item"> <span class="elevator-num">F5</span> <span class="elevator-text">數位</span> </a> </div> <script src="../js/jquery.js"></script> <script src="../js/transition.js"></script> <script src="../js/showhide.js"></script> <script src="../js/tab2.js"></script> <script src="../js/floor.js"></script> </body> </html>
base.css https://www.cnblogs.com/chenyingying0/p/12363689.html
floor.css
/*基本樣式 */ .container{ width:1200px; margin:0 auto; } .transition{ -webkit-transition:all .5s; -moz-transition:all .5s; -ms-transition:all .5s; -o-transition:all .5s; transition:all .5s; } .text-hidden{ text-indent:-9999px; overflow:hidden; } .fl{ float:left; } /*floor樓層區域*/ .floor{ margin-top:7px; height:534px; } .floor .container{ position: relative; z-index:1; } .tab-head{ height:68px; border-bottom:1px solid #f01414; } .tab-head-title{ margin-top:22px; } .tab-head-title-num{ display: inline-block; width:24px; height:24px; border-radius:50%; background-color:#07111b; color:#fff; text-align: center; line-height:24px; margin-right:10px; } .tab-head-title-name{ font-size:20px; color:#07111b; position: relative; top:3px; } .tab-head-item-wrap{ margin-top:8px; height:62px; line-height:62px; } .tab-head-item{ display: inline-block; font-size:14px; color:#93999f; margin-right:16px; } .tab-head-item-active{ color:#f01414; background:url(../img/floor-arrow.png) center bottom no-repeat; } .tab-head-item-divider{ display: inline-block; width:1px; height:14px; background-color:#d9dde1; margin-top:21px; margin-right:16px; } .tab-body{ height:466px; } .tab-body-panel{ height:466px; display: none; } .tab-body-panel-item{ width:200px; height:233px; text-align: center; } .tab-body-panel-item:hover{ box-shadow:0 0 10px rgba(0,0,0,.2); } .tab-body-panel-item-pic{ margin-top:24px; } .tab-body-panel-item-name{ margin-top:23px; font-size:12px; color:#07111b; } .tab-body-panel-item-price{ margin-top:9px; font-size:14px; color:#f01414; } /*elevator*/ .elevator{ position: fixed; left:50%; top:50%; margin-top:-90px; margin-left:-640px; /*container寬度1200px,50%是-600px,再移動-40px左右的距離*/ } .elevator-item{ width:24px; height:35px; display: block; line-height: 35px; text-align: center; color:#4d555d; border-top:1px solid #d9dde1; } .elevator-item:hover, .elevator-item-active{ color:#f01414; } .elevator-num{ } .elevator-text{ display: none; } .elevator-item:hover .elevator-num, .elevator-item-active .elevator-num{ display: none; } .elevator-item:hover .elevator-text, .elevator-item-active .elevator-text{ display: block; }
transition.js https://www.cnblogs.com/chenyingying0/p/12363649.html
showhide.js https://www.cnblogs.com/chenyingying0/p/12363707.html
tab2.js https://www.cnblogs.com/chenyingying0/p/12384972.html
floor.js
// 不要暴露在全局,使用匿名函數自執行 (function($){ "use strict"; //floor var $floor=$(".floor"); //樓層數據 var floorData=[ { num:"1", text:"服裝箱包", tabs:["大牌","男裝","女裝"], offsetTop:$floor.eq(0).offset().top, height:$floor.eq(0).height(), items:[ [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" } ], [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" } ], [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" } ] ] }, { num:"2", text:"個護美妝", tabs:["熱門","國際大牌","國際名品"], offsetTop:$floor.eq(1).offset().top, height:$floor.eq(1).height(), items:[ [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" } ], [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" } ], [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" } ] ] }, { num:"3", text:"手機通訊", tabs:["熱門","品質優選","新機嘗鮮"], offsetTop:$floor.eq(2).offset().top, height:$floor.eq(2).height(), items:[ [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" } ], [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" } ], [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" } ] ] }, { num:"4", text:"家用電器", tabs:["熱門","大家電","生活電器"], offsetTop:$floor.eq(3).offset().top, height:$floor.eq(3).height(), items:[ [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" } ], [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" } ], [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" } ] ] }, { num:"5", text:"電腦數位", tabs:["熱門","電腦/平板","潮流影音"], offsetTop:$floor.eq(4).offset().top, height:$floor.eq(4).height(), items:[ [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" } ], [ { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479" }, { name:"匡威男棒球開衫外套2020", price:"¥479"