Ana Sayfa Keşfet Yardım
Üye Ol Giriş Yap
jal
/
WebTest
İzle 2
Yıldızla 1
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

品优购首页增加电梯导航（JQuery）

Cathy 4 yıl önce
ebeveyn
e9c28e7bf8
işleme
50b7c2c2dc
3 değiştirilmiş dosya ile 190 ekleme ve 5 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 1 0
      pinyougou/css/index.css
  2. 152 5
      pinyougou/index.html
  3. 37 0
      pinyougou/js/index.js

+ 1 - 0
pinyougou/css/index.css
Dosyayı Görüntüle 

@@ -236,6 +236,7 @@
 
 
 /*电梯导航*/
 
 .fixedtool {
 
+	display: none;
 
 	position: fixed;
 
 	width: 66px;
 
 	top: 100px;

+ 152 - 5
pinyougou/index.html
Dosyayı Görüntüle 

@@ -13,6 +13,7 @@
 
 	<link rel="shortcut icon" href="favicon.ico">
 
 	<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
 
 	<script src="js/animate.js"></script>
 
+	<script src="js/jquery.min.js"></script>
 
 	<script src="js/index.js"></script>
 
 </head>
 
 <body>
 
@@ -420,7 +421,7 @@
 
 			</div>
 
 		</div>
 
 
-				<div class="shouji w">
 
+		<div class="shouji w">
 
 			<div class="box_hd">
 
 				<h3>
 
 					手机通讯
 
@@ -493,6 +494,154 @@
 
 				</ul>
 
 			</div>
 
 		</div>
 
+
 
+		<div class="diannao w">
 
+			<div class="box_hd">
 
+				<h3>
 
+					电脑办公
 
+				</h3>
 
+				<div class="tab_list">
 
+					<ul>
 
+						<li><a href="#" class="style-red">热门</a> | </li>
 
+						<li><a href="#">大家电</a>|</li>
 
+						<li><a href="#">生活电器</a>|</li>
 
+						<li><a href="#">厨房电器</a>|</li>
 
+						<li><a href="#">个护健康</a>|</li>
 
+						<li><a href="#">应季电器</a>|</li>
 
+						<li><a href="#">空气、净水</a>|</li>
 
+						<li><a href="#">新奇特</a>|</li>
 
+						<li><a href="#">高端电器</a></li>
 
+					</ul>
 
+				</div>
 
+			</div>
 
+			<div class="box_bd">
 
+				<ul class="tab_con">
 
+					<li class="w209">
 
+						<ul class="tab_con_list">
 
+							<li><a href="#">节能补贴</a></li>
 
+							<li><a href="#">节能补贴</a></li>
 
+							<li><a href="#">节能补贴</a></li>
 
+							<li><a href="#">节能补贴</a></li>
 
+							<li><a href="#">节能补贴</a></li>
 
+							<li><a href="#">节能补贴</a></li>
 
+						</ul>
 
+						<img src="upload/floor-1-1.png" alt="">
 
+					</li>
 
+					<li class="w329">
 
+						<div class="tab_con_item">
 
+							<a href="#">
 
+								<img src="upload/pic1.jpg" alt="">
 
+							</a>
 
+						</div>
 
+					</li>
 
+					<li class="w219">
 
+						<div class="tab_con_item">
 
+							<a href="#">
 
+								<img src="upload/floor-1-2.png" alt="">
 
+							</a>
 
+						</div>
 
+						<div class="tab_con_item">
 
+							<a href="#">
 
+								<img src="upload/floor-1-3.png" alt="">
 
+							</a>
 
+						</div>
 
+					</li>
 
+					<li class="w220">
 
+						<div class="tab_con_item">
 
+							<a href="#">
 
+								<img src="upload/floor-1-4.png" alt="">
 
+							</a>
 
+						</div>
 
+					</li>
 
+					<li class="w220">
 
+						<div class="tab_con_item">
 
+							<a href="#">
 
+								<img src="upload/floor-1-5.png" alt="">
 
+							</a>
 
+						</div>
 
+						<div class="tab_con_item">
 
+							<a href="#">
 
+								<img src="upload/floor-1-6.png" alt="">
 
+							</a>
 
+						</div>
 
+					</li>
 
+				</ul>
 
+			</div>
 
+		</div>
 
+
 
+		<div class="jiaju w">
 
+			<div class="box_hd">
 
+				<h3>
 
+					精品家具
 
+				</h3>
 
+				<div class="tab_list">
 
+					<ul>
 
+						<li><a href="#" class="style-red">热门</a> | </li>
 
+						<li><a href="#">大家电</a>|</li>
 
+						<li><a href="#">生活电器</a>|</li>
 
+						<li><a href="#">厨房电器</a>|</li>
 
+						<li><a href="#">个护健康</a>|</li>
 
+						<li><a href="#">应季电器</a>|</li>
 
+						<li><a href="#">空气、净水</a>|</li>
 
+						<li><a href="#">新奇特</a>|</li>
 
+						<li><a href="#">高端电器</a></li>
 
+					</ul>
 
+				</div>
 
+			</div>
 
+			<div class="box_bd">
 
+				<ul class="tab_con">
 
+					<li class="w209">
 
+						<ul class="tab_con_list">
 
+							<li><a href="#">节能补贴</a></li>
 
+							<li><a href="#">节能补贴</a></li>
 
+							<li><a href="#">节能补贴</a></li>
 
+							<li><a href="#">节能补贴</a></li>
 
+							<li><a href="#">节能补贴</a></li>
 
+							<li><a href="#">节能补贴</a></li>
 
+						</ul>
 
+						<img src="upload/floor-1-1.png" alt="">
 
+					</li>
 
+					<li class="w329">
 
+						<div class="tab_con_item">
 
+							<a href="#">
 
+								<img src="upload/pic1.jpg" alt="">
 
+							</a>
 
+						</div>
 
+					</li>
 
+					<li class="w219">
 
+						<div class="tab_con_item">
 
+							<a href="#">
 
+								<img src="upload/floor-1-2.png" alt="">
 
+							</a>
 
+						</div>
 
+						<div class="tab_con_item">
 
+							<a href="#">
 
+								<img src="upload/floor-1-3.png" alt="">
 
+							</a>
 
+						</div>
 
+					</li>
 
+					<li class="w220">
 
+						<div class="tab_con_item">
 
+							<a href="#">
 
+								<img src="upload/floor-1-4.png" alt="">
 
+							</a>
 
+						</div>
 
+					</li>
 
+					<li class="w220">
 
+						<div class="tab_con_item">
 
+							<a href="#">
 
+								<img src="upload/floor-1-5.png" alt="">
 
+							</a>
 
+						</div>
 
+						<div class="tab_con_item">
 
+							<a href="#">
 
+								<img src="upload/floor-1-6.png" alt="">
 
+							</a>
 
+						</div>
 
+					</li>
 
+				</ul>
 
+			</div>
 
+		</div>
 
 	</div>
 
 	<!-- 楼层区 end -->
 
 
@@ -501,10 +650,8 @@
 
 		<ul>
 
 			<li class="current">家用电器</li>
 
 			<li>手机通讯</li>
 
-			<li>手机通讯</li>
 
-			<li>手机通讯</li>
 
-			<li>手机通讯</li>
 
-			<li>手机通讯</li>
 
+			<li>电脑办公</li>
 
+			<li>精品家具</li>
 
 		</ul>
 
 	</div>
 
 	<!-- 固定电梯导航 end  -->

+ 37 - 0
pinyougou/js/index.js
Dosyayı Görüntüle 

@@ -1,3 +1,40 @@
 
+$(function () {
 
+  // 节流阀，互斥锁
 
+  var flag = true;
 
+  // 电梯导航
 
+  $(window).scroll(function () {
 
+    fixedtool();
 
+    if(flag) {
 
+      $('.floor .w').each(function (index, element) {
 
+        if($(window).scrollTop() >= $(element).offset().top){
 
+          $('.fixedtool li').eq(index).addClass('current').siblings().removeClass();
 
+        }
 
+      })
 
+    }
 
+  });
 
+
 
+  $('.fixedtool li').click(function () {
 
+    flag = false;
 
+    $(this).addClass('current').siblings().removeClass();
 
+    var current = $('.floor .w').eq($(this).index()).offset().top;
 
+    $('html, body').stop().animate({
 
+      scrollTop: current
 
+    }, function () {
 
+      flag = true;
 
+    });
 
+  })
 
+
 
+  fixedtool();
 
+
 
+  function fixedtool () {
 
+    if($(window).scrollTop() >= $('.recommend').offset().top){
 
+      $('.fixedtool').fadeIn();
 
+    }else {
 
+      $('.fixedtool').fadeOut();
 
+    }
 
+  }
 
+});
 
+
 
 window.onload = function () {
 
   var focus = document.querySelector('.focus');
 
   var arrow_l = document.querySelector('.arrow-l');