OPPO官網web界面開發案例

原創 CSU-Benjamin 2020-05-19 07:43

成品

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

一、框架實現

構建top,header,nav,banner,star,accessory,world,serve,after_sale,footer10個部分框架，然後再逐步構建每一部分。
在這裏插入圖片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>oppo</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<!--頁面的頂部-->
	<div id="top">
	<div class="container"></div>
	</div>
	<!--頁面的頭部-->
	<div id="header"><div class="container"></div>
	</div>
	<!--頁面的d導航-->
	<div id="nav"><div class="container"></div>
	</div>
	<!--頁面的banner-->
	<div id="banner"><div class="container"></div>
	</div>
	<!--頁面的明星機型-->
	<div id="star"><div class="container"></div>
	</div>
	<!--精選配件-->
	<div id="accessory"><div class="container"></div>
	</div>
	<!--搜索oupo-->
	<div id="world"><div class="container"></div>
	</div>
	<!--服務部分-->
	<div id="serve"><div class="container"></div>
	</div>
	<!--售後部分-->
	<div id="after_sale"><div class="container"></div>
	</div>
	<!--頁面底端-->
	<div id="footer"><div class="container"></div>
	</div>
</body>
</html>

css/index.css

*{
	margin: 0;
	padding: 0;
}
ol,ul{
	list-style: none;
}
a{
	color: #666；
	text-decoration:none;
}
.left{
	float: left;
}
.right{
	float: right;
}
/*測試部分*/
#top,#header,#nav,#banner,#star,#accessory,#world,#serve,#after_sale,#footer{
	height: 100px;
	width: 100%;
	border:1px solid #000;
}
.container{
	width: 1280px;
	border: 1px solid #f00;
	margin: 0 auto;
}

二、頁面頂部

在這裏插入圖片描述
思路：
1.工具：利用取色器將頁面截圖取色、利用畫板來看一張圖片中的圖標位置和距離右上角的像素距離。
畫板取色方法：http://www.tudoupe.com/win10/win10jiqiao/2017/0915/7089.html
2.將購物車右側的邊框去掉的方法爲單獨爲購物車設置樣式。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>oppo</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<!--頁面的頂部-->
	<div id="top">
		<div class="container">

		</div>
	</div>
	<!--頁面的頭部-->
	<div id="header">
		<div class="container">
			<div class="header_left left">
				<div class="xlwb"></div>
				<div class="txwb"></div>
				<div class="tel">400-666-888</div>
			</div>
			<ul class="right">
				<li><a href="#">登陸</a></li>
				<li><a href="#">註冊</a></li>
				<li><a href="#">積分兌換</a></li>
				<li><a href="#">幫助中心</a></li>
				<li class="shop_car"><span></span><a href="#">購物車</a></li>
				<!--因爲需要購物車右邊沒有豎線所以單獨給他一個樣式-->
			</ul>
		</div>
	</div>
	<!--頁面的d導航-->
	<div id="nav"><div class="container"></div>
	</div>
	<!--頁面的banner-->
	<div id="banner"><div class="container"></div>
	</div>
	<!--頁面的明星機型-->
	<div id="star"><div class="container"></div>
	</div>
	<!--精選配件-->
	<div id="accessory"><div class="container"></div>
	</div>
	<!--搜索oupo-->
	<div id="world"><div class="container"></div>
	</div>
	<!--服務部分-->
	<div id="serve"><div class="container"></div>
	</div>
	<!--售後部分-->
	<div id="after_sale"><div class="container"></div>
	</div>
	<!--頁面底端-->
	<div id="footer"><div class="container"></div>
	</div>
</body>
</html>

css/index.css

*{
	margin: 0;
	padding: 0;
	font-size: 14px;
}
ol,ul{
	list-style-type: none;
}
a{
	color:#666;
	text-decoration:none;

}
.left{
	float: left;
}
.right{
	float: right;
}
/*測試部分*/
#top,#header,#nav,#banner,#star,#accessory,#world,#serve,#after_sale,#footer{
	height: 100px;
	width: 100%;
	border:1px solid #000;
}
.container{
	width: 1280px;
	border: 1px solid #f00;
	margin: 0 auto;
}
/*設置頂部的樣式*/
#top{
	height: 10px;
	background-color: #00925f;
}
/*設置頁面的頭部*/
#header{
	height: 30px;
	background-color: #2d2d2d;

}
#header .xlwb{
	width: 20px;
	height: 17px;
	background:url("../img/icons.png") no-repeat -47px -95px;
/*爲啥這裏路徑要加..*/

}
#header .txwb{
	width: 20px;
	height: 20px;
	background:url("../img/icons.png") no-repeat -27px -92px;
/*爲啥這裏路徑要加..*/

}
#header .tel{
	color: #17925f;
}
#header .header_left div{
	float: left;
	margin: 5px 10px 0px 10px;
}/*讓top欄的圖標在一行顯示*/
#header ul li{
	float: left;
	margin: 5px 0px;
}/*讓top欄中的右邊的幾個列表也在一行顯示*/
#header li a{
	color: #b2b2b2;
	font-size: 14px;
	border-right: 1px solid #b2b2b2;
	padding: 0px 15px;
}
#header li a:hover{
	color: #00925f;
}
#header .shop_car a{
	border: none;
	padding-left: 15px;

}
#header .shop_car span{
	width: 19px;
	height: 16px;
	vertical-align:middle;/*調整購物車圖標位置*/
	/*apan是一個行內元素，不能設置寬度和高度,所以改變其屬性*/
	display: inline-block;
	margin-left:5px;
	background: url("../img/icons.png") no-repeat 0px -95px;
}

三、導航欄

之後只附該區域代碼。
在這裏插入圖片描述

	<!--頁面的d導航-->
	<div id="nav">
		<div class="container">
			<div class="logo left">
				<img src="img/logo.png" alt="OPPO">
			</div>
			<ul class="right">
				<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="#">ColorOS</a></li>
			</ul>
		</div>
	</div>
	

#header .shop_car span{
	width: 19px;
	height: 16px;
	vertical-align:middle;/*調整購物車圖標位置*/
	/*apan是一個行內元素，不能設置寬度和高度,所以改變其屬性*/
	display: inline-block;
	margin-left:5px;
	background: url("../img/icons.png") no-repeat 0px -95px;
}
/*設置導航欄的樣式*/
#nav{
	color: rgb(238,238,238);
	height: 90px;
}
#nav li{
	float: left;
	margin: 0px 15px;
	line-height: 90px;
	/*vertical-align: middle;*/

}
#nav li a{
	color: #666666;
	font-weight: bold;/*加粗*/
}
#nav li a:hover{
	color: #00925F;
	font-weight: bold;/*加粗*/
}

四、明星機型板塊

因爲banner部分比較複雜需要用到插件所以暫時跳過
在這裏插入圖片描述

的明星機型-->
	<div id="star">
		<div class="container">
			<div class="star_top">
				<img src="img/i-c-title.png" alt="明星機型" >
			</div>
			<div>
			<ul >
				<li>
					<div>
						<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
						<h2>N3</h2>
						<p>1600萬電動旋轉攝像頭</p>
						<p class="money">&yen; 3999 立即購買<span></span></p>
					</div>	
				</li>
				
				<li>
					<div>
						<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
						<h2>N3</h2>
						<p>1600萬電動旋轉攝像頭</p>
						<p class="money">&yen; 3999 立即購買<span></span></p>
					</div>	
				</li>
				
				<li>
					<div>
						<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
						<h2>N3</h2>
						<p>1600萬電動旋轉攝像頭</p>
						<p class="money">&yen; 3999 立即購買<span></span></p>
					</div>	
				</li>
				
				<li>
					<div>
						<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
						<h2>N3</h2>
						<p>1600萬電動旋轉攝像頭</p>
						<p class="money">&yen; 3999 立即購買<span></span></p>
					</div>	
				</li>
			</ul>

			</div>
		</div>
	</div>

/*設置明星機型頁面的樣式*/
#star{
	height: 700px;
	background-color: #f2f2f2;

}
#star .star_top{

	text-align: center;/*水平居中*/
	margin:10px;
}
#star ul{
	width:1182px;
	margin: 10px auto;
	/*text-align: center;*/
}
#star li{
	width: 270px;
	border-bottom: 1px solid #dfdfdf;
	float: left;
	margin-left: 20px;
	transition: all 0.3s;
}
#star li:hover{
	border-bottom: 5px solid #4f8590;
	transform:translateY(-10px);
}
#star li img{
	width: 270px;
}
#star li h2{
	text-align: center;
	margin: 10px 0px;
}
#star li .money{
	color: #00925f;
	font-size: 14px;
	font-weight: bold;
}
#star li p{
	text-align: center;
	margin: 10px 0px;
	font-size: 12px;
	color: #bdbdbd;
}
#star li span{
	width: 13px;
	height: 13px;
	display: inline-block;
	background:url("../img/icons-1.png") no-repeat -177px -1014px;
	margin-left: 5px;
}

五、精選配件功能

在這裏插入圖片描述

	<!--精選配件-->
	<div id="accessory">
		<div class="container">
			<div class="acc_top">
				<img src="img/wb.png" alt="">
			</div>
			<div class="acc_main">
				<div class="acc_left left">
					<div >
					<img src="img/20150413174400N0dPnxUKHk.jpg">
				</div>
				<div class="acc_all">
					<p>OPPO手機官網AAESSORY配件</p>
					<ul>
						<li>耳機</li>
						<li>耳機</li>
						<li>耳機</li>
						<li>耳機</li>
						<li>耳機</li>
						<li>耳機</li>
					</ul>
					<h2 class="line"></h2>
					<p class="acc">全部配件<span></span></p>
				</div>
				<div>
					<img src="img/20131120165101xYIYzhkVEy.jpg">
				</div>
				<div>
					<img src="img/20150413174340NLV2gvV4FU.jpg">
				</div>
				</div>
				<div class="acc_right right">
					<div>
					<img src="img/20150123182505RO822scYYt.jpg">
					</div>
					<div>
					<img src="img/20141230145609l7Fsk7CdHy.jpg">
					</div>
					<div>
					<img src="img/20141011101157yZEFpMrk0h.jpg">
					</div>
					<div>
					<img src="img/201410270957132inlm3IwsV.jpg">
					</div>
				</div>
			</div>
		</div>
	</div>



/*設置精選配件之間的樣式*/
#accessory{
	background-color: #f6f6f6;
	height: 950px;
}
#accessory .acc_top{
	text-align: center;
	margin: 20px 0;
}
#accessory .acc_main{
	width: 1090px;
	margin: 10px auto;
}
#accessory .acc_left{
	width: 540px;
	/*border: 1px solid #000;*/
}
#accessory .acc_left div{
	float: left;
	margin:10px;
	border-bottom:4px solid #dfdfdf;
	transition: all 0.3s;
}
#accessory .acc_left img{
	width: 250px;
	/*border-bottom:4px solid #dfdfdf*/
		/*margin-bottom: 20px;
	margin-right: 20px;*/
}
#accessory .acc_left div:hover{
	
	border-bottom:4px solid #4f8590;
	transform:translateY(-10px);
}
#accessory .acc_left div:last-child img{
	width: 520px;
}
#accessory .acc_all{
	width: 250px;
	height: 250px;
	border: 3px solid #EAEAEA;
	background-color: #fff;
	padding: 20px;
	box-sizing: border-box;/*改變實際計算大小的方式*/
	margin-bottom: 20px;
}
#accessory .acc_all p:first-child{
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
}
#accessory .acc_all li{
	float: left;
	width: 100px;
	height: 40px;
	text-align: center;
	line-height: 40px;
}
#accessory .acc_all li:hover{
	color: #00925F;
}
#accessory .acc_all .line{
	width: 150px;
	height: 0;
	border-top: 1px solid #ccc;
	clear: both;
	margin: 15px auto;
}

#accessory .acc_all p:last-child{
	text-align: center;
}
#accessory .acc_all p:last-child:hover{
	color: #00925F;
}
#accessory .acc_all span{
	width: 13px;
	height: 13px;
	display: inline-block;
	vertical-align: middle;
	background: url("../img/icons-1.png") no-repeat -177px -1014px;
	margin-left: 10px;
}

#accessory .acc_right{
	width: 540px;
}
#accessory .acc_right div{
	float: left;
	margin: 10px;
	border-bottom: 3px solid #EAEAEA;
	transition: all .3s;
}
#accessory .acc_right div:hover{
	border-bottom: 3px solid #00925F;
	transform: translateY(-10px);
}
#accessory .acc_right img{
	width:250px;
}
#accessory .acc_right div:first-child img{
	width: 520px;
	height: 250px;
}
#accessory .acc_right div:last-child img{
	width: 250px;
	height: 241px;
}

六、歐珀功能

在這裏插入圖片描述

<!--搜索oupo-->
	<div id="world">
		<div class="container">
			<div class="world_top ">
				<img src="img/weibo.png" alt="搜索歐珀">
			</div>
			<div class="world_main">
			<div class="world_left left">
				<ul>
					<li><img src="img/201403261455420lqMPNGENc.png" alt=""></li>
					<li><img src="img/20140926184007v2rjcVFcbW.jpg" alt=""></li>
					<li><img src="img/20131212113902waaLqQUWfB.jpg" alt=""></li>
					<li><img src="img/20150226100534QqezQ85N6y.jpg" alt=""></li>
				</ul>
			</div>
			<div class="world_right right">
				<div class="world_right_top xin">
					<h2>新聞</h2>
				</div>
				<div class="world_right_top wei">
					<h2>微博</h2>
				</div>
				
				<dl>
					<div>
					<dt><img src="img/20140919101741cvR0TcGkaq.jpg" alt=""></dt>
					<dd>OPPO R金色版打造紐約時裝週夢幻之旅</dd>
					</div>
					<div>
					<dt><img src="img/20150227161036GqO59Dvta2.jpg" alt=""></dt>
					<dd>OPPO R金色版打造紐約時裝週夢幻之旅</dd>
					</div>
					<div>
					<dt><img src="img/20140604145924CFBnAtVjqN.jpg" alt=""></dt>
					<dd>OPPO R金色版打造紐約時裝週夢幻之旅</dd>
					</div>
					<div>
					<dt><img src="img/20140919101741cvR0TcGkaq.jpg" alt=""></dt>
					<dd>OPPO R金色版打造紐約時裝週夢幻之旅</dd>
					</div>
				</dl>
			</div>
			</div>

		</div>
	</div>


/*搜索歐珀部分*/
#world{
	height: 850px;
	background-color: #f6f6f6;
}
#world .world_main{
	width: 1258px;
	margin: 5px auto;
}
#world .world_top {
	text-align: center;
	margin: 10px 0;
}
#world .world_left{
	width: 750px;
	height: 780px;
	/*border: 2px solid #000;*/
}
#world ul img{
	width:350px;
	height: 350px;
}
#world ul li{
	float: left;
	margin: 10px;
	border-bottom: 3px solid #EAEAEA;
	transition: all .3s;
}
#world ul li:hover{
	border-bottom: 3px solid #00925F;
	transform: translateY(-10px);
}
#world .world_right{
	width: 500px;
	/*border: 2px solid #000;*/
	background-color: #fff;
}
#world dt img{
	width:150px;
	height:150px;
}
#world .world_right .world_right_top {
	width: 250px;
	height:100px;
	float: left;
	line-height: 120px;
	text-align:center;
}
#world .world_right .wei{
	background-color: #f6f6f6;
}
#world .world_right .xin{
	border-top: 4px solid #4f8590;
}
#world .world_right dl div{	
	clear: both;
	background-color: #f6f6f6;
	/*border: 2px solid #000;*/
	width: 480px;
	height: 150px;
	margin: 10px;
	position: relative;
}
#world .world_right dl dd{
	 position: absolute;
	 top: 20px;
	left: 160px;
}

七、服務欄

在這裏插入圖片描述

<!--服務部分-->
	<div id="serve">
	<div class="container">
		<ul>
			<li>
			<span></span>
			<h2>正品保障</h2>
			<p>所有的商品都是原裝正品</p>
			</li>
			<li>
			<span></span>
			<h2>正品保障</h2>
			<p>所有的商品都是原裝正品</p>
			</li>
			<li>
			<span></span>
			<h2>正品保障</h2>
			<p>所有的商品都是原裝正品</p>
			</li>
			<li>
			<span></span>
			<h2>正品保障</h2>
			<p>所有的商品都是原裝正品</p>
			</li>
			<li>
			<span></span>
			<h2>正品保障</h2>
			<p>所有的商品都是原裝正品</p>
			</li>
		</ul>
	</div>

/*服務頁面樣式設計*/
#serve{
	clear: both;
	height: 66px;
	background-color: #fff;
}
#serve ul{
	width: 1260px;
	margin: 0 auto;

}
#serve li{
	float: left;
	width: 230px;
	margin: 10px;
	border-bottom: 1px solid #333;
	transition: all .3s;
}
#serve li:hover{
	transform: translateY(-10px);
}
#serve li span{
	float: left;
	width: 42px;
	height: 44px;
	margin-right: 5px;
	display: inline-block;
	background: url("../img/icons.png") no-repeat 0px -43px;

}
#serve li p2{
	font-size: 12px;
}
#serve li h2{
	font-weight: bold;
}

八、售後服務

在這裏插入圖片描述

<!--售後部分-->
	<div id="after_sale">
		<div class="container">
		<ul>
			<li>
		        <ol>
					<li><a href="#">關於我們</a></li>
					<li><a href="#">關於OPPO</a></li>
					<li><a href="#">新聞中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			</li>
			<li>
				<ol>
					<li><a href="#">關於我們</a></li>
					<li><a href="#">關於OPPO</a></li>
					<li><a href="#">新聞中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			</li>
			<li>
				<ol>
					<li><a href="#">關於我們</a></li>
					<li><a href="#">關於OPPO</a></li>
					<li><a href="#">新聞中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			
			</li>
			<li>
				<ol>
					<li><a href="#">關於我們</a></li>
					<li><a href="#">關於OPPO</a></li>
					<li><a href="#">新聞中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			
			</li>
			<li>
				<ol>
					<li><span  class="xl"></span><a href="#">關於我們</a></li>
					<li><span class="xl"></span><a href="#">關於OPPO</a></li>
					<li><span class="xl"></span><a href="#">新聞中心</a></li>
					<li><span class="xl"></span><a href="#">人才招聘</a></li>
				</ol>
			
			</li>
			<li>
				<ol>
					<li><a href="#">關於我們</a></li>
					<li><a href="#">關於OPPO</a></li>
					<li><a href="#">新聞中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			</li>
			
		</ul>
		</div>
	</div>

/*設置售後服務頁面*/
#after_sale{
	height: 200px;
	background-color: #fff;
}
#after_sale ul{
	padding-top: 20px;
}
#after_sale ul li{
	width: 140px;
	float: left;
	text-align: center;
	margin: 0px 30px;
}
#after_sale ol li{
	line-height: 30px;
}
#after_sale ol li:first-child a{
	/*font-weight: bold;*/
}
#after_sale .xl{
	width: 20px;
	height: 17px;
	background: url("../img/icons.png") no-repeat -47px -95px;
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
}

九、頁腳欄

在這裏插入圖片描述

<!--頁面底端-->
	<div id="footer">
	<div class="container">
		<p>
			<img src="img/i-f-logo.png">
			<span>@2020 北京市xxxxxxx</span>
			<a href="#">版權說明</a>
			<a href="#">版權說明</a>
			<a href="#">版權說明</a>
			<a href="#">版權說明</a>
			<a href="#">版權說明</a>
		</p>
	</div>
	</div>

/*頁腳部分*/
#footer{
	height: 40px;
	background-color: #2D2D2D;
}
#footer p{
	line-height: 40px;
}
#footer img{
	margin-left: 20px;
}
#footer p span{
	color: #828282;
	margin: 0px 430px 0px 20px;
}
#footer p a{
	color: #fff;
	margin: 0px 10px;
}
#footer p a:hover{
	color: #00925F;
}

十、banner部分

用到swiper.css和swiper.css插件

<link rel="stylesheet" href="css/swiper.css">
<style type="text/css">
		body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        #banner{
        	height:630px;
        }

        .swiper-container {
            width: 100%;
            height: 632px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
	</style>

<!--頁面的banner-->
	<div id="banner">
		<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/banner1.jpg" width="100%;" height="630"></div>
            <div class="swiper-slide"><img src="img/banner2.jpg" width="100%;" height="630"></div>
            <div class="swiper-slide"><img src="img/banner3.jpg" width="100%;" height="630"></div>
            <div class="swiper-slide"><img src="img/banner4.jpg" width="100%;" height="630"></div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next">1</div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="banner-nav-bg"></div>
	</div>

<script type="text/javascript" src="js/swiper.js"></script>
<!--banner動畫-->
<script type="text/javascript">
	var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        autoplay: 3000,

        
        speed: 1000,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        effect: 'fade',//  effect: 'flip',effect: 'coverflow',slide', 'fade',cube
        grabCursor: true,
        cube: {
            shadow: false,
            slideShadows: false,
            shadowOffset: 20,
            shadowScale: 0.94
        }
    });
</script>

十一、js製作歐珀部分入場動畫

此處用到animate.css插件和jquery-1.11.3.js插件

<link rel="stylesheet" href="css/animate.min.css">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>


$(window).scroll(function(){
	//計算滾輪得距離
	var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
	 console.log(scrollT);
	 //計算探索歐珀的距離
	var backTop = $("#world").offset().top - $(window).height()/2;
	 console.log(backTop);
	if(scrollT > backTop){
		$(".a1").addClass("animated bounceInRight show").removeClass("fade");
		$(".a2").addClass("animated bounceInDown show").removeClass("fade");
		$(".a3").addClass("animated bounceInUp show").removeClass("fade");
		$(".a4").addClass("animated bounceInLeft show").removeClass("fade");
	}
});

因爲新增的動畫會讓原來的動畫消失所以我們在li內部新增一個div用來嵌套。

<ul>
					<li class="a1 fade">
					<div><img src="img/201403261455420lqMPNGENc.png" alt=""></div>
					</li>

					<li class="a2 fade"><div><img src="img/20140926184007v2rjcVFcbW.jpg" alt=""></div></li>
					<li class="a3 fade"><div><img src="img/20131212113902waaLqQUWfB.jpg" alt=""></div></li>
					<li class="a4 fade"><div><img src="img/20150226100534QqezQ85N6y.jpg" alt=""></div></li>
				</ul>

#world ul li div{
	float: left;
	margin: 10px;
	border-bottom: 3px solid #EAEAEA;
	transition: all .3s;
}
#world ul li:hover div{
	border-bottom: 3px solid #00925F;
	transform: translateY(-10px);
}

十二、返回頂部

在這裏插入圖片描述
首先顯示這個按鈕並且隨着頁面移動它不移動

<!--返回頂部-->
	<div id="re_top">
	<button id="btn" ></button>
	</div>

/*返回頂部*/
#re_top{
	width: 100px;
	height: 100px;
}
#re_top button{
	position: fixed;
	width: 83px;
	height: 74px;
	background:url(../img/totop.png) no-repeat 0px 0px;
	left: 1520px;
	top: 600px;
	z-index: 100;

}

設置監聽js代碼

window.onload =function(){
	//找到頁面中的按鈕
	var totop=document.getElementById("btn");
	totop.style.display="none"
	//給按鈕綁定事件
	var time=null;
	totop.onclick =function(){
		//週期性定時
		time=setInterval(function(){
			//實現先快後慢向上移動
			var backtop = document.documentElement.scrollTop || document.body.scrollTop;
			document.documentElement.scrollTop=backtop-backtop/5;
			//清零定時器
			if(backtop == 0){
				clearInterval(time);
			}
		},30)
	}
	//更具滾輪移動距離判斷是否顯示按鈕
	var pageHeigt=700;
	window.οnscrοll=function(){
		var backtop = document.documentElement.scrollTop || document.body.scrollTop;
		console.log(backtop);
		if(backtop>pageHeigt){
		totop.style.display="block"
		}else{
		totop.style.display="none"
		}
	}

初始化按鈕爲透明
在window.onload =function(){添加

totop.style.display="none"

十三、 吸頂燈效果

即鼠標移動，導航欄永遠在最上面。
在這裏插入圖片描述
在window.onload =function(){添加全局變量

var nav =document.getElementById("nav");
	var navTop=nav.offsetTop;

在window.οnscrοll=function(){添加

//吸頂燈效果
		if(backtop>=navTop){
			nav.style.position="fixed";
			nav.style.top="0";
			nav.style.left="0";
			nav.style.zIndex="101";//因爲前面把返回頂部的按鈕設置成了100
		}else{
			nav.style.position="";
		}

全部代碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>oppo</title>
	<link rel="stylesheet" href="css/swiper.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/animate.min.css">
	
	<style type="text/css">
		body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        #banner{
        	height:630px;
        }

        .swiper-container {
            width: 100%;
            height: 632px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
	</style>
</head>
<body>
	<!--頁面的頂部-->
	<div id="top">
		<div class="container">

		</div>
	</div>
	<!--頁面的頭部-->
	<div id="header">
		<div class="container">
			<div class="header_left left">
				<div class="xlwb"></div>
				<div class="txwb"></div>
				<div class="tel">400-666-888</div>
			</div>
			<ul class="right">
				<li><a href="#">登陸</a></li>
				<li><a href="#">註冊</a></li>
				<li><a href="#">積分兌換</a></li>
				<li><a href="#">幫助中心</a></li>
				<li class="shop_car"><span></span><a href="#">購物車</a></li>
				<!--因爲需要購物車右邊沒有豎線所以單獨給他一個樣式-->
			</ul>
		</div>
	</div>
	<!--頁面的d導航-->
	<div id="nav">
		<div class="container">
			<div class="logo left">
				<img src="img/logo.png" alt="OPPO">
			</div>
			<ul class="right">
				<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="#">ColorOS</a></li>
			</ul>
		</div>
	</div>
	<!--頁面的banner-->
	<div id="banner">
		<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/banner1.jpg" width="100%;" height="630"></div>
            <div class="swiper-slide"><img src="img/banner2.jpg" width="100%;" height="630"></div>
            <div class="swiper-slide"><img src="img/banner3.jpg" width="100%;" height="630"></div>
            <div class="swiper-slide"><img src="img/banner4.jpg" width="100%;" height="630"></div>

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next">1</div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="banner-nav-bg"></div>
	</div>
	<!--頁面的明星機型-->
	<div id="star">
		<div class="container">
			<div class="star_top">
				<img src="img/i-c-title.png" alt="明星機型" >
			</div>
			<div>
			<ul >
				<li>
					<div>
						<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
						<h2>N3</h2>
						<p>1600萬電動旋轉攝像頭</p>
						<p class="money">&yen; 3999 立即購買<span></span></p>
					</div>	
				</li>
				
				<li>
					<div>
						<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
						<h2>N3</h2>
						<p>1600萬電動旋轉攝像頭</p>
						<p class="money">&yen; 3999 立即購買<span></span></p>
					</div>	
				</li>
				
				<li>
					<div>
						<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
						<h2>N3</h2>
						<p>1600萬電動旋轉攝像頭</p>
						<p class="money">&yen; 3999 立即購買<span></span></p>
					</div>	
				</li>
				
				<li>
					<div>
						<img src="img/20150423183545tYnFzYnn3p.jpg" alt="">
						<h2>N3</h2>
						<p>1600萬電動旋轉攝像頭</p>
						<p class="money">&yen; 3999 立即購買<span></span></p>
					</div>	
				</li>
			</ul>

			</div>
		</div>
	</div>
	<!--精選配件-->
	<div id="accessory">
		<div class="container">
			<div class="acc_top">
				<img src="img/wb.png" alt="">
			</div>
			<div class="acc_main">
				<div class="acc_left left">
					<div >
					<img src="img/20150413174400N0dPnxUKHk.jpg">
				</div>
				<div class="acc_all">
					<p>OPPO手機官網AAESSORY配件</p>
					<ul>
						<li>耳機</li>
						<li>耳機</li>
						<li>耳機</li>
						<li>耳機</li>
						<li>耳機</li>
						<li>耳機</li>
					</ul>
					<h2 class="line"></h2>
					<p class="acc">全部配件<span></span></p>
				</div>
				<div>
					<img src="img/20131120165101xYIYzhkVEy.jpg">
				</div>
				<div>
					<img src="img/20150413174340NLV2gvV4FU.jpg">
				</div>
				</div>
				<div class="acc_right right">
					<div >
					<img src="img/20150123182505RO822scYYt.jpg">
					</div >
					<div >
					<img src="img/20141230145609l7Fsk7CdHy.jpg">
					</div>
					<div >
					<img src="img/20141011101157yZEFpMrk0h.jpg">
					</div>
					<div >
					<img src="img/201410270957132inlm3IwsV.jpg">
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--搜索oupo-->
	<div id="world">
		<div class="container">
			<div class="world_top ">
				<img src="img/weibo.png" alt="搜索歐珀">
			</div>
			<div class="world_main">
			<div class="world_left left">
				<ul>
					<li class="a1 fade">
					<div><img src="img/201403261455420lqMPNGENc.png" alt=""></div>
					</li>

					<li class="a2 fade"><div><img src="img/20140926184007v2rjcVFcbW.jpg" alt=""></div></li>
					<li class="a3 fade"><div><img src="img/20131212113902waaLqQUWfB.jpg" alt=""></div></li>
					<li class="a4 fade"><div><img src="img/20150226100534QqezQ85N6y.jpg" alt=""></div></li>
				</ul>
			</div>
			<div class="world_right right">
				<div class="world_right_top xin">
					<h2>新聞</h2>
				</div>
				<div class="world_right_top wei">
					<h2>微博</h2>
				</div>
				
				<dl>
					<div>
					<dt><img src="img/20140919101741cvR0TcGkaq.jpg" alt=""></dt>
					<dd>OPPO R金色版打造紐約時裝週夢幻之旅</dd>
					</div>
					<div>
					<dt><img src="img/20150227161036GqO59Dvta2.jpg" alt=""></dt>
					<dd>OPPO R金色版打造紐約時裝週夢幻之旅</dd>
					</div>
					<div>
					<dt><img src="img/20140604145924CFBnAtVjqN.jpg" alt=""></dt>
					<dd>OPPO R金色版打造紐約時裝週夢幻之旅</dd>
					</div>
					<div>
					<dt><img src="img/20140919101741cvR0TcGkaq.jpg" alt=""></dt>
					<dd>OPPO R金色版打造紐約時裝週夢幻之旅</dd>
					</div>
				</dl>
			</div>
			</div>

		</div>
	</div>
	<!--服務部分-->
	<div id="serve">
	<div class="container">
		<ul>
			<li>
			<span></span>
			<h2>正品保障</h2>
			<p>所有的商品都是原裝正品</p>
			</li>
			<li>
			<span></span>
			<h2>正品保障</h2>
			<p>所有的商品都是原裝正品</p>
			</li>
			<li>
			<span></span>
			<h2>正品保障</h2>
			<p>所有的商品都是原裝正品</p>
			</li>
			<li>
			<span></span>
			<h2>正品保障</h2>
			<p>所有的商品都是原裝正品</p>
			</li>
			<li>
			<span></span>
			<h2>正品保障</h2>
			<p>所有的商品都是原裝正品</p>
			</li>
		</ul>
	</div>
	</div>
	<!--售後部分-->
	<div id="after_sale">
		<div class="container">
		<ul>
			<li>
		        <ol>
					<li><a href="#">關於我們</a></li>
					<li><a href="#">關於OPPO</a></li>
					<li><a href="#">新聞中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			</li>
			<li>
				<ol>
					<li><a href="#">關於我們</a></li>
					<li><a href="#">關於OPPO</a></li>
					<li><a href="#">新聞中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			</li>
			<li>
				<ol>
					<li><a href="#">關於我們</a></li>
					<li><a href="#">關於OPPO</a></li>
					<li><a href="#">新聞中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			
			</li>
			<li>
				<ol>
					<li><a href="#">關於我們</a></li>
					<li><a href="#">關於OPPO</a></li>
					<li><a href="#">新聞中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			
			</li>
			<li>
				<ol>
					<li><span  class="xl"></span><a href="#">關於我們</a></li>
					<li><span class="xl"></span><a href="#">關於OPPO</a></li>
					<li><span class="xl"></span><a href="#">新聞中心</a></li>
					<li><span class="xl"></span><a href="#">人才招聘</a></li>
				</ol>
			
			</li>
			<li>
				<ol>
					<li><a href="#">關於我們</a></li>
					<li><a href="#">關於OPPO</a></li>
					<li><a href="#">新聞中心</a></li>
					<li><a href="#">人才招聘</a></li>
				</ol>
			</li>
			
		</ul>
		</div>
	</div>
	<!--頁面底端-->
	<div id="footer">
	<div class="container">
		<p>
			<img src="img/i-f-logo.png">
			<span>@2020 北京市xxxxxxx</span>
			<a href="#">版權說明</a>
			<a href="#">版權說明</a>
			<a href="#">版權說明</a>
			<a href="#">版權說明</a>
			<a href="#">版權說明</a>
		</p>
	</div>
	</div>
	<!--返回頂部-->
	<div id="re_top">
	<button id="btn" ></button>
	</div>
	<script type="text/javascript" src="js/swiper.js"></script>
	<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
	<script src="js/index.js"></script>
	<script type="text/javascript">
	var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        autoplay: 3000,

        
        speed: 1000,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        effect: 'fade',//  effect: 'flip',effect: 'coverflow',slide', 'fade',cube
        grabCursor: true,
        cube: {
            shadow: false,
            slideShadows: false,
            shadowOffset: 20,
            shadowScale: 0.94
        }
    });
</script>
<!--返回頂部-->

</body>
</html>

index.css

*{
	margin: 0;
	padding: 0;
	font-size: 14px;
}
ol,ul{
	list-style-type: none;
}
a{
	color:#666;
	text-decoration:none;

}
.left{
	float: left;
}
.right{
	float: right;
}
.fade{
	opacity: 0;
}
.show{
	opacity: 1;
}
/*測試部分*/
#top,#header,#nav,#banner,#star,#accessory,#world,#serve,#after_sale,#footer{
	/*height: 100px;*/
	width: 100%;
	/*border:1px solid #000;*/
}
.container{
	width: 1280px;
	/*border: 1px solid #f00;*/
	margin: 0 auto;
}
/*設置頂部的樣式*/
#top{
	height: 10px;
	background-color: #00925f;
}
/*設置頁面的頭部*/
#header{
	height: 30px;
	background-color: #2d2d2d;

}
#header .xlwb{
	width: 20px;
	height: 17px;
	background:url("../img/icons.png") no-repeat -47px -95px;
/*爲啥這裏路徑要加..*/

}
#header .txwb{
	width: 20px;
	height: 20px;
	background:url("../img/icons.png") no-repeat -27px -92px;
/*爲啥這裏路徑要加..*/

}
#header .tel{
	color: #17925f;
}
#header .header_left div{
	float: left;
	margin: 5px 10px 0px 10px;
}/*讓top欄的圖標在一行顯示*/
#header ul li{
	float: left;
	margin: 5px 0px;
}/*讓top欄中的右邊的幾個列表也在一行顯示*/
#header li a{
	color: #b2b2b2;
	font-size: 14px;
	border-right: 1px solid #b2b2b2;
	padding: 0px 15px;
}
#header li a:hover{
	color: #00925f;
}
#header .shop_car a{
	border: none;
	padding-left: 15px;

}
#header .shop_car span{
	width: 19px;
	height: 16px;
	vertical-align:middle;/*調整購物車圖標位置*/
	/*apan是一個行內元素，不能設置寬度和高度,所以改變其屬性*/
	display: inline-block;
	margin-left:5px;
	background: url("../img/icons.png") no-repeat 0px -95px;
}
/*設置導航欄的樣式*/
#nav{
	background-color: rgb(238,238,238);
	height: 60px;
}
#nav img{
	line-height: 60px;
	width: 200px;
	height: 50px;
	
}
#nav .logo{
	padding-bottom: 10px;
}
#nav li{
	float: left;
	margin: 0px 15px;
	line-height: 60px;
	/*vertical-align: middle;*/

}
#nav li a{
	color: #666666;
	font-weight: bold;/*加粗*/
}
#nav li a:hover{
	color: #00925F;
	font-weight: bold;/*加粗*/
}
/*設置明星機型頁面的樣式*/
#star{
	clear: both;
	overflow: hidden;/*清除白色多餘部分*/
	height: 700px;
	background-color: #f2f2f2;

}
#star .star_top{

	text-align: center;/*水平居中*/
	margin:10px;
}
#star ul{
	width:1182px;
	margin: 10px auto;
	/*text-align: center;*/
}
#star li{
	width: 270px;
	border-bottom: 1px solid #dfdfdf;
	float: left;
	margin-left: 20px;
	transition: all 0.3s;
}
#star li:hover{
	border-bottom: 5px solid #4f8590;
	transform:translateY(-10px);
}
#star li img{
	width: 270px;
}
#star li h2{
	text-align: center;
	margin: 10px 0px;
}
#star li .money{
	color: #00925f;
	font-size: 14px;
	font-weight: bold;
}
#star li p{
	text-align: center;
	margin: 10px 0px;
	font-size: 12px;
	color: #bdbdbd;
}
#star li span{
	width: 13px;
	height: 13px;
	display: inline-block;
	background:url("../img/icons-1.png") no-repeat -177px -1014px;
	margin-left: 5px;
}
/*設置精選配件之間的樣式*/
#accessory{
	/*清除白色多餘部分*/
	overflow: hidden;
	background-color: #f6f6f6;
	height: 950px;
}
#accessory .acc_top{
	text-align: center;
	margin: 20px 0;
}
#accessory .acc_main{
	width: 1090px;
	margin: 10px auto;
}
#accessory .acc_left{
	width: 540px;
	/*border: 1px solid #000;*/
}
#accessory .acc_left div{
	float: left;
	margin:10px;
	border-bottom:4px solid #dfdfdf;
	transition: all 0.3s;
}
#accessory .acc_left img{
	width: 250px;
	/*border-bottom:4px solid #dfdfdf*/
		/*margin-bottom: 20px;
	margin-right: 20px;*/
}
#accessory .acc_left div:hover{
	
	border-bottom:4px solid #4f8590;
	transform:translateY(-10px);
}
#accessory .acc_left div:last-child img{
	width: 520px;
}
#accessory .acc_all{
	width: 250px;
	height: 250px;
	border: 3px solid #EAEAEA;
	background-color: #fff;
	padding: 20px;
	box-sizing: border-box;/*改變實際計算大小的方式*/
	margin-bottom: 20px;
}
#accessory .acc_all p:first-child{
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
}
#accessory .acc_all li{
	float: left;
	width: 100px;
	height: 40px;
	text-align: center;
	line-height: 40px;
}
#accessory .acc_all li:hover{
	color: #00925F;
}
#accessory .acc_all .line{
	width: 150px;
	height: 0;
	border-top: 1px solid #ccc;
	clear: both;
	margin: 15px auto;
}

#accessory .acc_all p:last-child{
	text-align: center;
}
#accessory .acc_all p:last-child:hover{
	color: #00925F;
}
#accessory .acc_all span{
	width: 13px;
	height: 13px;
	display: inline-block;
	vertical-align: middle;
	background: url("../img/icons-1.png") no-repeat -177px -1014px;
	margin-left: 10px;
}

#accessory .acc_right{
	width: 540px;
}
#accessory .acc_right div{
	float: left;
	margin: 10px;
	border-bottom: 3px solid #EAEAEA;
	transition: all .3s;
}
#accessory .acc_right div:hover{
	border-bottom: 3px solid #00925F;
	transform: translateY(-10px);
}
#accessory .acc_right img{
	width:250px;
}
#accessory .acc_right div:first-child img{
	width: 520px;
	height: 250px;
}
#accessory .acc_right div:last-child img{
	width: 250px;
	height: 241px;
}
/*搜索歐珀部分*/
#world{
	/*清除白色多餘部分*/
	overflow: hidden;
	height: 850px;
	background-color: #f6f6f6;
}
#world .world_main{
	width: 1258px;
	margin: 5px auto;
}
#world .world_top {
	text-align: center;
	margin: 10px 0;
}
#world .world_left{
	width: 750px;
	height: 780px;
	/*border: 2px solid #000;*/
}
#world ul img{
	width:350px;
	height: 350px;
}
#world ul li div{
	float: left;
	margin: 10px;
	border-bottom: 3px solid #EAEAEA;
	transition: all .3s;
}
#world ul li:hover div{
	border-bottom: 3px solid #00925F;
	transform: translateY(-10px);
}
#world .world_right{
	width: 500px;
	/*border: 2px solid #000;*/
	background-color: #fff;
}
#world dt img{
	width:150px;
	height:150px;
}
#world .world_right .world_right_top {
	width: 250px;
	height:100px;
	float: left;
	line-height: 120px;
	text-align:center;
}
#world .world_right .wei{
	background-color: #f6f6f6;
}
#world .world_right .xin{
	border-top: 4px solid #4f8590;
}
#world .world_right dl div{	
	clear: both;
	background-color: #f6f6f6;
	/*border: 2px solid #000;*/
	width: 480px;
	height: 150px;
	margin: 10px;
	position: relative;
}
#world .world_right dl dd{
	 position: absolute;
	 top: 20px;
	left: 160px;
}
/*服務頁面樣式設計*/
#serve{
	clear: both;
	height: 66px;
	background-color: #fff;
}
#serve ul{
	width: 1260px;
	margin: 0 auto;

}
#serve li{
	float: left;
	width: 230px;
	margin: 10px;
	border-bottom: 1px solid #333;
	transition: all .3s;
}
#serve li:hover{
	transform: translateY(-10px);
}
#serve li span{
	float: left;
	width: 42px;
	height: 44px;
	margin-right: 5px;
	display: inline-block;
	background: url("../img/icons.png") no-repeat 0px -43px;

}
#serve li p2{
	font-size: 12px;
}
#serve li h2{
	font-weight: bold;
}
/*設置售後服務頁面*/
#after_sale{
	height: 200px;
	background-color: #fff;
}
#after_sale ul{
	padding-top: 20px;
}
#after_sale ul li{
	width: 140px;
	float: left;
	text-align: center;
	margin: 0px 30px;
}
#after_sale ol li{
	line-height: 30px;
}
#after_sale ol li:first-child a{
	/*font-weight: bold;*/
}
#after_sale .xl{
	width: 20px;
	height: 17px;
	background: url("../img/icons.png") no-repeat -47px -95px;
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
}
/*頁腳部分*/
#footer{
	height: 40px;
	background-color: #2D2D2D;
}
#footer p{
	line-height: 40px;
}
#footer img{
	margin-left: 20px;
}
#footer p span{
	color: #828282;
	margin: 0px 430px 0px 20px;
}
#footer p a{
	color: #fff;
	margin: 0px 10px;
}
#footer p a:hover{
	color: #00925F;
}
/*返回頂部*/
#re_top{
	width: 100px;
	height: 100px;
}
#re_top button{
	position: fixed;
	width: 83px;
	height: 74px;
	background:url(../img/totop.png) no-repeat 0px 0px;
	left: 1520px;
	top: 600px;
	z-index: 100;

}

index.js

$(window).scroll(function(){
	//計算滾輪得距離
	var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
	
	// console.log(scrollT);
	 //計算探索歐珀的距離
	var backTop = $("#world").offset().top - $(window).height()/2;
	// console.log(backTop);
	 //當滑到了歐珀部分開始動畫
	if(scrollT > backTop){
		$(".a1").addClass("animated bounceInRight show").removeClass("fade");
		$(".a2").addClass("animated bounceInDown show").removeClass("fade");
		$(".a3").addClass("animated bounceInUp show").removeClass("fade");
		$(".a4").addClass("animated bounceInLeft show").removeClass("fade");
	}
});

window.onload =function(){
	//找到頁面中的按鈕
	var totop=document.getElementById("btn");
	totop.style.display="none"
	//給按鈕綁定事件
	var time=null;
	var nav =document.getElementById("nav");
	var navTop=nav.offsetTop;
	//console.log(navTop);
	totop.onclick =function(){
		//週期性定時
		time=setInterval(function(){
			//實現先快後慢向上移動
			var backtop = document.documentElement.scrollTop || document.body.scrollTop;
			document.documentElement.scrollTop=backtop-backtop/5;
			//清零定時器
			if(backtop == 0){
				clearInterval(time);
			}
		},30)
	}
	//根據滾輪移動距離判斷是否顯示按鈕
	var pageHeigt=700;
	window.onscroll=function(){
		var backtop = document.documentElement.scrollTop || document.body.scrollTop;
		//console.log(backtop);
		if(backtop>pageHeigt){
		totop.style.display="block"
		}else{
		totop.style.display="none"
		}
		//吸頂燈效果
		if(backtop>=navTop){
			nav.style.position="fixed";
			nav.style.top="0";
			nav.style.left="0";
			nav.style.zIndex="101";//因爲前面把返回頂部的按鈕設置成了100
		}else{
			nav.style.position="";
		}
	}
}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Facebook 如何做大規模服務的自主測試

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

Paul Marinescu 2021-12-21 10:54:01

微軟終於被罵夠了？迴歸一鍵更改默認瀏覽器

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

闫园园 2021-12-07 11:58:59

使用HTML+CSS製作逼真的紅色開關

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

海拥(haiyong.site) 2021-12-04 14:03:52

JetBrains 發佈輕量級編輯器 Fleet

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-11-30 14:53:56

HTTP客戶端演進之路

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

尼先 2021-11-24 17:43:59

TypeScript 4.5 發佈，帶來 Promise 功能改進

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-11-19 11:23:57

手把手帶你玩轉 JS | 引航計劃｜大前端

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

三掌柜 2021-11-18 09:28:56

Flutter性能監控實踐

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"前言","attrs

贝壳大前端技术团队 2021-11-13 13:33:50

花7.5億都做不好的項目，被三位程序員爸爸重寫並開源了

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockq

Tina 2021-11-11 09:23:48

ShowMeBug 中如何科學的識別用戶瀏覽器？

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

ShowMeBug 2021-11-10 17:33:55

架構師（2021年11月）

卷首語：二十年老程序員的五條心得 作者：Justin Etheredge 1. 我懂的並不多 “你怎麼會不知道什麼是 BGP？”“你難道沒聽說過 Rust？” 類似的問題可能每天都會出現在我們面前。沒錯，投身於軟件行業的很多人之所以熱愛這份

InfoQ 中文站 2021-11-08 08:03:53

託管頁前端異常監控與治理實戰

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null

百度Geek说 2021-11-05 15:03:57

網易雲信陳功：體驗共享和無限融合是雲通信未來的進化方向丨QCon

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

张俊宝 2021-11-03 19:03:56

微軟產品經理：你不能不知道的6個Web開發者工具

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

Christian Heilmann 2021-11-03 16:08:56

貝殼Flutter瘦身實踐

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"背景","attrs

贝壳大前端技术团队 2021-11-03 10:33:58