jquery.fullpage.js360安全路由全屏页面滚动效果



134 535 179



特效描述:全屏 全屏页面滚动 页面滚动 页面滚动效果,

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/jquery.fullPage.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>

3. HTML代码

<div class="scrollpage-hd">
	<div class="inner">
		<h1><a href="">360安全路由</a></h1>
		<ul class="nav">
			<li><a href="http://www.17sucai.com/">性能</a></li>
			<li><a href="http://www.17sucai.com/">智能</a></li>
			<li><a href="http://www.17sucai.com/">安全</a></li>
			<li><a href="http://www.17sucai.com/">技术规格</a></li>
			<li><a href="http://www.17sucai.com/">常见问题</a></li>
			<li><a href="http://www.17sucai.com/">固件更新</a></li>
			<li><a href="http://www.17sucai.com/">讨论</a></li>
			<li><a href="http://www.17sucai.com/">下载手机客户端</a></li>
		</ul>
	</div>
</div>
<div id="scrollpage">
	<div class="section section1">
		<a class="gojd" href="###">手机玩转路由器——360安全路由器,更安全更智能,9月1日京东特卖开启,GO!</a>
	</div>
	<div class="section section2">
		<div class="inner">
			<img class="img1" src="images/slider2_title.png" alt="">
			<img class="img2" src="images/slider2_phone.png" alt="">
		</div>
	</div>
	<div class="section section3">
		<div class="slide">
			<h2>超快感——业界良心打造信号稳定、速度快3倍、可穿墙的路由器</h2>
			<img src="images/slider_item0.png" alt="">
			<p class="txt">
				Wi-Fi进入千兆时代,5G双频路由才是新潮流。<br>
				最新的802.11ac协议,Wi-Fi速度快3倍,传输速率高达1167Mbps。<br>领先的MIMO
				2X2智能天线技术,信号更好、穿墙更轻松。同时支持2.4GHz和5GHz双频传输数据,可以实现<br>更快速度、传输更多数据,无论打游戏还是看视频您都能获得最佳信号。
			</p>
		</div>
		<div class="slide">
			<h2>超快感——业界良心打造信号稳定、速度快3倍、可穿墙的路由器</h2>
			<img src="images/slider_item1.png" alt="">
			<p class="txt">
				Wi-Fi进入千兆时代,5G双频路由才是新潮流。<br>
				最新的802.11ac协议,Wi-Fi速度快3倍,传输速率高达1167Mbps。<br>领先的MIMO
				2X2智能天线技术,信号更好、穿墙更轻松。同时支持2.4GHz和5GHz双频传输数据,可以实现<br>更快速度、传输更多数据,无论打游戏还是看视频您都能获得最佳信号。
			</p>
		</div>
		<div class="slide">
			<h2>超快感——业界良心打造信号稳定、速度快3倍、可穿墙的路由器</h2>
			<img src="images/slider_item2.png" alt="">
			<p class="txt">
				Wi-Fi进入千兆时代,5G双频路由才是新潮流。<br>
				最新的802.11ac协议,Wi-Fi速度快3倍,传输速率高达1167Mbps。<br>领先的MIMO
				2X2智能天线技术,信号更好、穿墙更轻松。同时支持2.4GHz和5GHz双频传输数据,可以实现<br>更快速度、传输更多数据,无论打游戏还是看视频您都能获得最佳信号。
			</p>
		</div>
		<div class="slide">
			<h2>超快感——业界良心打造信号稳定、速度快3倍、可穿墙的路由器</h2>
			<img src="images/slider_item3.png" alt="">
			<p class="txt">
				Wi-Fi进入千兆时代,5G双频路由才是新潮流。<br>
				最新的802.11ac协议,Wi-Fi速度快3倍,传输速率高达1167Mbps。<br>领先的MIMO
				2X2智能天线技术,信号更好、穿墙更轻松。同时支持2.4GHz和5GHz双频传输数据,可以实现<br>更快速度、传输更多数据,无论打游戏还是看视频您都能获得最佳信号。
			</p>
		</div>
		<div class="slide">
			<h2>超快感——业界良心打造信号稳定、速度快3倍、可穿墙的路由器</h2>
			<img src="images/slider_item4.png" alt="">
			<p class="txt">
				Wi-Fi进入千兆时代,5G双频路由才是新潮流。<br>
				最新的802.11ac协议,Wi-Fi速度快3倍,传输速率高达1167Mbps。<br>领先的MIMO
				2X2智能天线技术,信号更好、穿墙更轻松。同时支持2.4GHz和5GHz双频传输数据,可以实现<br>更快速度、传输更多数据,无论打游戏还是看视频您都能获得最佳信号。
			</p>
		</div>
	</div>
	<div class="section section4">
		<div class="inner">
			<img class="img1" src="images/slider4_bg.jpg" alt="">
			<div class="txt">
				<h2></h2>
				<p>颠覆传统路由的繁琐设置,用手机就能搞定一切!您可以通过远程操控,随时为父母解决网络问题。信号强度可调,辐射可控,为宝宝和孕妇等家人提供健康的上网环境。爱捣鼓的Geek,想要玩转路由,您有太多新技能需get√,万能中继、自定义host、无限扩展的插件中心……</p>
				<div class="icon"></div>
				<p>• 功率可调节辐射可控 • 设备限速 • 一键优化信号 • 访客免密码上网 • 秒踢蹭网者</p>
			</div>
		</div>
	</div>
	<div class="section section5">
		<div class="inner">
			<img class="img1" src="images/slider5_bg.gif" alt="">
			<div class="txt">
				<h2></h2>
				<p>全民网络时代来临,路由器作为各种上网设备联网的第一道关口,更加需要全方位的安全防护。360首创sOS路由器安全系统,一键就能开启“Wi-Fi防盗门“,实时查杀全球最新的病毒、木马和恶意DNS数据,让家中每一台上网设备都可以安心畅游网络。</p>
				<img class="icon" src="images/slider5_icon1.png" alt="">
				<img class="icon" src="images/slider5_icon2.png" alt="">
				<img class="icon" src="images/slider5_icon3.png" alt="">
			</div>
			<div class="ft">
				<div class="ft-link">
					<div class="more-links first">
						<h3>帮助</h3>
						<ul>
							<li><a href="">反馈建议</a></li>
						</ul>
					</div>
					<div class="more-links">
						<h3>关注我们</h3>
						<ul>
							<li><a href="">官方论坛</a></li>
							<li><a href="">官方微博</a></li>
							<li><a href="">官方微信</a></li>
						</ul>
					</div>
					<div class="more-links">
						<h3>相关网站</h3>
						<ul>
							<li><a href="">360硬件专区</a></li>
							<li><a href="">360儿童卫士</a></li>
							<li><a href="">360防丢卫士</a></li>
						</ul>
					</div>
					<div class="service">
						<ul>
							<li class="phone">400-6822-360</li>
							<li class="time">周一至周日9:00-18:00</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$('#scrollpage').fullpage({
		navigation: true
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 自动滚动图片轮播 全屏焦点图 全屏切换 宽屏全屏 宽屏 全屏 页面全屏 页面宽屏 图片全屏 滚动切换 滚动条切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到