OPPO官网web界面开发案例

其他 2020-01-12 21:54:03 阅读次数: 0

成品

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

一、框架实现

构建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="";
		}
	}
}
CSU-Benjamin
发布了18 篇原创文章 · 获赞 8 · 访问量 2092
私信 关注

猜你喜欢

转载自blog.csdn.net/weixin_43698704/article/details/103866451
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022