页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

jquery.fullpage.js帮老婆做的阳光小内站

如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试fullPage.js。案例中,我使用了jquery.fullpage.js+jquery.bxslider.min.js+animate.min.css帮老婆做的阳光小内站。

jquery.fullpage.js帮老婆做的阳光小内站


<!DOCTYPE HTML>
<html>
<head>
<title>莫妮蔻阳光小内改善月经不调和痛经的内裤</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="Keywords" Content="莫妮蔻阳光小内,阳光小内诚招代理,160元即可做代理商,超低价微商代理,改善月经不调,改善痛经">
<meta name="Description" Content="莫妮蔻阳光小内中国第一款远红外私护内裤阳光小内,诚招微商代理,致力于为女性改善月经不调,改善痛经,改善妇科炎症,改善白带异常">
<link rel="stylesheet" href="/Public/static/fullPage/jquery.fullPage.css">
<link rel="stylesheet" href="/Public/static/bxslider/jquery.bxslider.css">
<link rel="stylesheet" href="/Public/static/animate/animate.min.css">
<link rel="stylesheet" href="./Themes/Home/xiaonei/Public/css/index.css">
<script src="/Public/static/jquery-1.9.1.min.js"></script>
<script src="/Public/static/jquery.easings.min.js"></script>
<script src="/Public/static/fullPage/jquery.fullPage.min.js"></script>
<script src="/Public/static/bxslider/jquery.bxslider.min.js"></script>
<script src="/Public/static/animate/jquery.animate.js"></script>
   <script>
		$(function(){
			 $("#fullpage").fullpage({
					sectionsColor: ['#40a3e1','#6cbb52', '#e89c38', '#40a3e1', '#6cbb52', '#40a3e1'],
					anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
					menu: '#menu',
					afterRender: function(){			
						$('.inner .animate').each(function(){
							var $rel = $(this).attr('rel');
							var $arr = $rel.split(',');
							$(this).animate({
								left: $arr[0] + 'px',
								top: $arr[1] + 'px'
							}, 500);
						});
						$('.bxslider1').bxSlider({
			            pager: true,
			            pause : 2500,
			            infiniteLoop: true,
			            auto: false,
			            controls:false
						});
						$('.bxslider2').bxSlider({
			            pager: false,
			            pause : 2500,
			            infiniteLoop: true,
			            auto: true,
			            controls:false
						});
					},
					afterLoad: function(anchorLink, index){
						  $('.inner').eq(index - 1).find('.animate').each(function(){
								  $(this).animateCss($(this).attr("in"));
							});
					},
					onLeave: function(index, direction){
						  $('.inner').eq(index - 1).find('.animate').each(function(){
								  $(this).animateCss($(this).attr("out"));
							});
					}
				});
		});
	</script>
</head>
<body>
<!-- 头部 -->
<div class="header" id="header">
	<div class="inner1">
		<h1><span class="hide">莫妮蔻阳光小内改善月经不调和痛经的内裤</span><a href="/">阳光小内</a></h1>
		<ul class="nav">
      <li class="active"><a href="/">首页</a></li>
      <li ><a href="/article/lists/category/1">新闻动态</a></li><li ><a href="/article/lists/category/40">关于我们</a></li><li ><a href="/article/lists/category/65">联系方式</a></li>		</ul>
	</div>
</div>
<!-- /头部 -->

<ul id="menu">
	<li data-menuanchor="page1" class="active"><a href="#page1"><span>阳光<br>小内</span></a></li>
	<li data-menuanchor="page2"><a href="#page2"><span>产品<br>特点</span></a></li>
	<li data-menuanchor="page3"><a href="#page3"><span>女土<br>小内</span></a></li>
	<li data-menuanchor="page4"><a href="#page4"><span>男土<br>小内</span></a></li>
	<li data-menuanchor="page5"><a href="#page5"><span>新闻<br>动态</span></a></li>
	<li data-menuanchor="page6"><a href="#page6"><span>微信<br>营销</span></a></li>
</ul>
<div id="fullpage">
	<div class="section">
		<div class="inner">
			<div class="animate" rel="480,90"  style="position:absolute;width:450px;height:450px;" in="fadeInUp" out="fadeOutRight">
				<ul class="bxslider bxslider1" >
				  <li><img src="./Themes/Home/xiaonei/Public/images/yangguangxiaonei11.jpg" width="450"/></li>
				  <li><img src="./Themes/Home/xiaonei/Public/images/yangguangxiaoneins.jpg" width="450"/></li>
				  <li><img src="./Themes/Home/xiaonei/Public/images/yangguangxiaonei13.jpg" width="450"/></li>
				</ul>
			</div>
			<div class="animate" rel="0,250"  style="position:absolute;width:450px;height:300px;" in="fadeInLeft" out="fadeOutDown">
				<ul class="bxslider bxslider2" >
				  <li><img src="./Themes/Home/xiaonei/Public/images/xiaonei1.jpg" width="450" height="300"/></li>
				  <li><img src="./Themes/Home/xiaonei/Public/images/xiaonei2.jpg" width="450" height="300"/></li>
				  <li><img src="./Themes/Home/xiaonei/Public/images/xiaonei3.jpg" width="450" height="300"/></li>
				</ul>
			</div>
			<a class="animate fs54 fw800" href="javascript:void(0)" rel="0,90" in="fadeInUp" out="fadeOutLeft">阳光小内官方代理</a>
			<a class="animate fs32" href="javascript:void(0)" rel="0,160" in="fadeInUp" out="fadeOutLeft">160元即可代理</a>
			<a class="animate fs32 red" href="http://weidian.com/?userid=260686935" rel="300,160" in="fadeInUp" out="fadeOutLeft">我要购买</a>
			<a class="animate fs32" href="javascript:void(0)" rel="0,200" in="fadeInUp" out="fadeOutLeft">合作微信:15014519338</a>
			
		</div>
	</div>
	
	<div class="section">
		<div class="inner">
			<a class="animate fs20" href="javascript:void(0)" rel="0,90"  in="fadeInLeft" out="fadeOutLeft">1、摸起来很丝滑,穿上很舒服</a>
			<a class="animate fs20" href="javascript:void(0)" rel="0,120" in="fadeInLeft" out="fadeOutLeft">2、有吸湿排汗透气、除菌抗菌的功效</a>
			<a class="animate fs20" href="javascript:void(0)" rel="0,150" in="fadeInLeft" out="fadeOutLeft">3、通风处三小时速干内裤</a>
			<a class="animate fs32 red" href="javascript:void(0)" rel="0,180" in="fadeInLeft" out="fadeOutLeft">4、全国首款远红外理疗功效</a>
			<a class="animate fs20" href="javascript:void(0)" rel="0,230" in="fadeInLeft" out="fadeOutLeft">5、一款记忆性高弹面料内裤</a>
			<a class="animate " href="javascript:void(0)" rel="500,90"  in="fadeInRight" out="fadeOutRight"><img alt="远红外杀菌阳光小内裤" width="450" height="510" src="./Themes/Home/xiaonei/Public/images/yhw.jpg"></a>
			<a class="animate " href="javascript:void(0)" rel="0,300"  in="fadeInUp" out="fadeOutDown"><img alt="透气柔软修身的记忆性阳光小内裤" width="450" height="300" src="./Themes/Home/xiaonei/Public/images/jyx.jpg"></a>
		</div>
	</div>
	
	<div class="section">
		<div class="inner">
			<a class="animate fs20" href="javascript:void(0)" rel="490,90"  in="fadeInRight" out="fadeOutRight">1、改善循环系统,提高免疫力,杀菌止痒除异味 </a>
			<a class="animate fs20" href="javascript:void(0)" rel="490,120" in="fadeInRight" out="fadeOutRight">2、避免来自外部细菌滋扰和分泌物滋生细菌,做到无菌</a>
			<a class="animate fs20" href="javascript:void(0)" rel="490,150" in="fadeInRight" out="fadeOutRight">3、减少自身分泌物滋生细菌,避免自我的感染</a>
			<a class="animate fs32 red" href="javascript:void(0)" rel="490,180" in="fadeInRight" out="fadeOutRight"><strong>4、改善受孕情况</strong></a>
			<a class="animate fs20 red" href="javascript:void(0)" rel="490,230" in="fadeInRight" out="fadeOutRight"><strong>5、改善月经不调和经期疼痛</strong></a>
			<a class="animate fs20" href="javascript:void(0)" rel="490,260" in="fadeInRight" out="fadeOutRight">6、释放臀部肌肤,零束腹</a>
			<a class="animate fs20" href="javascript:void(0)" rel="490,290" in="fadeInRight" out="fadeOutRight">7、修复暗淡肌肤,恢复自然光泽</a>
			<a class="animate fs20" href="javascript:void(0)" rel="490,320" in="fadeInRight" out="fadeOutRight">8、塑造完美臀形</a>
			<a class="animate " href="javascript:void(0)" rel="0,90"  in="fadeInLeft" out="fadeOutLeft"><img alt="女神必备安全杀菌止痒除异味阳光小内裤" width="450" height="510" src="./Themes/Home/xiaonei/Public/images/nsbb.jpg"></a>
			<a class="animate " href="javascript:void(0)" rel="490,350"  in="fadeInUp" out="fadeOutDown"><img alt="改善月经不调、经期疼痛、受孕阳光小内裤" width="480" height="250" src="./Themes/Home/xiaonei/Public/images/nsxn.jpg"></a>
		</div>
	</div>
	<div class="section">
		<div class="inner">
			<a class="animate fs20" href="javascript:void(0)" rel="500,90"  in="fadeInRight" out="fadeOutRight">1、免疫力低下、身体虚弱、流行性疾病抵抗力弱者</a>
			<a class="animate fs20 red" href="javascript:void(0)" rel="500,130" in="fadeInRight" out="fadeOutRight">2、疲软无力、耐力差、死精少精不育的患者</a>
			<a class="animate fs20" href="javascript:void(0)" rel="500,170" in="fadeInRight" out="fadeOutRight">3、尿频、尿急、尿等待、尿分叉、阴囊潮湿的患者</a>
			<a class="animate fs20" href="javascript:void(0)" rel="500,210" in="fadeInRight" out="fadeOutRight">4、精力减退、会阴胀痛、腰酸无力的患者</a>
			<a class="animate fs20" href="javascript:void(0)" rel="500,250" in="fadeInRight" out="fadeOutRight">5、脓血、滴白、尿道刺痛有炎症的患者</a>
			<a class="animate fs20 red" href="javascript:void(0)" rel="500,290" in="fadeInRight" out="fadeOutRight">6、裤裆湿乎乎、异味特别大的患者</a>
			<a class="animate " href="javascript:void(0)" rel="0,90"  in="fadeInLeft" out="fadeOutLeft"><img alt="改善尿道炎、龟头炎、支原体衣原体感染、生殖器疱疹、前列腺男性患者阳光小内裤" width="450" height="510" src="./Themes/Home/xiaonei/Public/images/nsnk.jpg"></a>
			<a class="animate " href="javascript:void(0)" rel="500,350"  in="fadeInUp" out="fadeOutDown"><img alt="改善死精少精不育的患者阳光小内裤" width="450" height="250" src="./Themes/Home/xiaonei/Public/images/xiaonei.jpg"></a>
		</div>
	</div>
	
	<div class="section">	 
		<div class="inner">
				<a class="animate red" target="_blank" href="/article/detail/id/79" rel="0,86" in="fadeInLeft" out="fadeOutLeft">阳光小内有什么特点?微商代理好做吗?</a>
				<a class="animate " target="_blank" href="/article/detail/id/80" rel="0,116" in="fadeInLeft" out="fadeOutLeft">莫妮蔻阳光小内真的有这么好吗</a>
				<a class="animate fs26 red" target="_blank" href="/article/detail/id/81" rel="0,146" in="fadeInLeft" out="fadeOutLeft">阳光小内适合哪些人群?</a>
				<a class="animate " target="_blank" href="/article/detail/id/82" rel="0,186" in="fadeInLeft" out="fadeOutLeft">怎么加盟阳光小内?阳光小内怎么代理?</a>
				<a class="animate red" target="_blank" href="/article/detail/id/83" rel="0,216" in="fadeInLeft" out="fadeOutLeft">中国第一款远红外私护内裤阳光小内</a>
				<a class="animate " target="_blank" href="/article/detail/id/84" rel="570,86" in="fadeInRight" out="fadeOutRight">妇科炎症如何预防和改善</a>
				<a class="animate fs32 red" target="_blank" href="/article/detail/id/85" rel="570,116" in="fadeInRight" out="fadeOutRight">穿阳光小内帮你改善痛经</a>
				<a class="animate " target="_blank" href="/article/detail/id/86" rel="570,156" in="fadeInRight" out="fadeOutRight">妇科炎症的表现,怎么对症下药</a>
				<a class="animate " target="_blank" href="/article/detail/id/87"  rel="570,186" in="fadeInRight" out="fadeOutRight">宫寒不孕怎么调理</a>
				<a class="animate " target="_blank" href="/article/detail/id/88"  rel="570,216" in="fadeInRight" out="fadeOutRight">白带异常的症状及快速解决的方法</a>
				<a class="animate red" target="_blank" href="/article/detail/id/89" rel="350,256" in="fadeInRight" out="fadeOutRight">阳光小内对男性健康的作用</a>
				<a class="animate" target="_blank" href="/article/detail/id/96"  rel="350,286" in="fadeInRight" out="fadeOutRight">哪个品牌的功能性内裤是健康有保障的</a>
				<a class="animate " target="_blank" href="/article/detail/id/92"  rel="350,316" in="fadeInRight" out="fadeOutRight">莫妮蔻阳光小内与普通内裤的区别及优势</a>
				<a class="animate " target="_blank" href="/article/detail/id/97"  rel="350,346" in="fadeInRight" out="fadeOutRight">远红外物理杀菌-莫妮蔻阳光小内诚招代理</a>
				<a class="animate red" target="_blank" href="/article/detail/id/91" rel="350,376" in="fadeInRight" out="fadeOutRight">阳光小内对女性健康的作用</a>
				<a class="animate " target="_blank" href="/article/detail/id/94" rel="350,406" in="fadeInRight" out="fadeOutRight">莫妮蔻阳光小内是正规产品吗</a>
				<a class="animate " target="_blank" href="/article/detail/id/93" rel="350,436" in="fadeInRight" out="fadeOutRight">最全面缓解痛经方法</a>
				<a class="animate red fs26" target="_blank" href="/article/detail/id/95" rel="350,466" in="fadeInRight" out="fadeOutRight">阳光小内全国统一价格</a>
				<a class="animate " href="javascript:void(0)" rel="330,87" in="fadeInDown" out="fadeOutUp"><img width="220" height="150" src="./Themes/Home/xiaonei/Public/images/2.jpg"></a>
				<a class="animate " a href="javascript:void(0)" rel="849,156" in="zoomIn" out="zoomOut"><img width="108" height="93" src="./Themes/Home/xiaonei/Public/images/jingdai.png"></a>
				<a class="animate " a href="javascript:void(0)" rel="0,256" in="fadeInLeft" out="fadeOutLeft"><img width="340" height="240" src="./Themes/Home/xiaonei/Public/images/3.jpg"></a>
				<a class="animate " href="javascript:void(0)" rel="750,260"  in="fadeInUp" out="fadeOutDown"><img alt="中国第一款远红外私护内裤阳光小内" width="180" height="240" src="./Themes/Home/xiaonei/Public/images/1.gif"></a>
		</div> 
	</div>	
	<div class="section">
		<div class="inner">
			<a class="animate fs20 red" href="http://weidian.com/?userid=260686935" target="_blank" rel="330,350"  in="fadeInUp" out="fadeOutDown"><strong>点击进入糖主阳光小内微店</strong></a>
			<a class="animate fs20" href="javascript:void(0)" rel="50,350" in="fadeInLeft" out="fadeOutLeft">糖主阳光小内定阅号</a>
			<a class="animate fs20" href="javascript:void(0)" rel="630,350" in="fadeInRight" out="fadeOutRight">糖主阳光小内个人微信号</a>
			<a class="animate " href="http://weidian.com/?userid=260686935" target="_blank" rel="320,90"  in="fadeInDown" out="fadeOutUp"><img alt="糖主阳光小内微店" width="260" height="260" src="./Themes/Home/xiaonei/Public/images/tzygxnqwd.jpg"></a>
			<a class="animate " href="javascript:void(0)" rel="30,90"  in="fadeInUp" out="fadeOutDown"><img alt="糖主阳光小内定阅号" width="260" height="260" src="./Themes/Home/xiaonei/Public/images/tzygxnqyh.jpg"></a>
			<a class="animate " href="javascript:void(0)" rel="610,90"  in="fadeInUp" out="fadeOutDown"><img alt="糖主阳光小内个人微信号" width="260" height="260" src="./Themes/Home/xiaonei/Public/images/tzygxnwxh.jpg"></a>
			<div class="foot animate" rel="0,400"  in="zoomIn" out="zoomOut">
					<p><a target="_blank" href="/article/lists/category/40">关于我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a target="_blank" href="/article/lists/category/1">新闻资讯</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a target="_blank" href="/article/lists/category/65">商务合作</a></p>
					<p>&copy;2016 莫妮蔻阳光小内官网|阳光小内代理|阳光小内中国官方网站 版权所有</p>
			</div>
		</div>	
	</div>
</div>
<div style="display:none;"><script src="http://s95.cnzz.com/stat.php?id=1259121350&web_id=1259121350" language="JavaScript"></script></div>	
</body>
</html>

fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:

  • 支持鼠标滚动
  • 支持前进后退和键盘控制
  • 多个回调函数
  • 支持手机、平板触摸事件
  • 支持 CSS3 动画
  • 支持窗口缩放
  • 窗口缩放时自动调整
  • 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等



配置

1、选项

选项 类型 默认值 说明
verticalCentered 字符串 true 内容是否垂直居中
resize 布尔值 false 字体是否随着窗口缩放而缩放
slidesColor 函数 设置背景颜色
anchors 数组 定义锚链接
scrollingSpeed 整数 700 滚动速度,单位为毫秒
easing 字符串 easeInQuart 滚动动画方式
menu 布尔值 false 绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动
navigation 布尔值 false 是否显示项目导航
navigationPosition 字符串 right 项目导航的位置,可选 left 或 right
navigationColor 字符串 #000 项目导航的颜色
navigationTooltips 数组 项目导航的 tip
slidesNavigation 布尔值 false 是否显示左右滑块的项目导航
slidesNavPosition 字符串 bottom 左右滑块的项目导航的位置,可选 top 或 bottom
controlArrowColor 字符串 #fff 左右滑块的箭头的背景颜色
loopBottom 布尔值 false 滚动到最底部后是否滚回顶部
loopTop 布尔值 false 滚动到最顶部后是否滚底部
loopHorizontal 布尔值 true 左右滑块是否循环滑动
autoScrolling 布尔值 true 是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条
scrollOverflow 布尔值 false 内容超过满屏后是否显示滚动条
css3 布尔值 false 是否使用 CSS3 transforms 滚动
paddingTop 字符串 0 与顶部的距离
paddingBottom 字符串 0 与底部距离
fixedElements 字符串
normalScrollElements

keyboardScrolling 布尔值 true 是否使用键盘方向键导航
touchSensitivity 整数 5
continuousVertical 布尔值 false 是否循环滚动,与 loopTop 及 loopBottom 不兼容
animateAnchor 布尔值 true
normalScrollElementTouchThreshold 整数 5

2、方法

名称 说明
moveSectionUp() 向上滚动
moveSectionDown() 向下滚动
moveTo(section, slide) 滚动到
moveSlideRight() slide 向右滚动
moveSlideLeft() slide 向左滚动
setAutoScrolling() 设置页面滚动方式,设置为 true 时自动滚动
setAllowScrolling() 添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling() 添加或删除键盘方向键控制
setScrollingSpeed() 定义以毫秒为单位的滚动速度

3、回调函数

名称 说明
afterLoad 滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算
onLeave 滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:
index 是离开的“页面”的序号,从1开始计算;
nextIndex 是滚动到的“页面”的序号,从1开始计算;
direction 判断往上滚动还是往下滚动,值是 up 或 down。
afterRender 页面结构生成后的回调函数,或者说页面初始化完成后的回调函数
afterSlideLoad 滚动到某一水平滑块后的回调函数,与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave 某一水平滑块滚动前的回调函数,与 onLeave 类似,接收 anchorLink、index、slideIndex、direction 4个参数


相关链接

发表评论