全屏滚动是目前网站开发常用的效果,笔者也曾使用过类似插件,但是对此类插件的开发一直抱有强烈兴趣,而今在前人的经验指导下,终于领悟到了一些插件开发的思维。
如下效果:
接下来看PageSwitch.js代码
(function($){
//浏览器兼容性处理
var _prefix=(function(temp){
var aPrefix=["webkit","Moz","o","ms"],
props="";
for(var i in aPrefix){
props=aPrefix[i]+"Transition";
if(temp.style[props]!=undefined){
return "-"+aPrefix[i].toLowerCase()+"-";
}
}
return false;
})(document.createElement(PageSwitch));
/*
* 闭包的运用,对外只暴露一个变量PageSwitch
*/
var PageSwitch=(function(){
//PageSwitch构造函数
function PageSwitch(element,options){
this.settings=$.extend(true,$.fn.PageSwitch.defaults,options||{});
this.element=element;
this.init();
}
//构造函数原型上挂载实例方法
PageSwitch.prototype={
//初始化
init:function(){
var me=this;
me.selectors=me.settings.selectors;
me.sections=me.element.find(me.selectors.sections);
me.section=me.sections.find(me.selectors.section);
me.pagesCount=me.pagesCount();
me.index=me.settings.index;
//页面布局初始化
this._initPaging();
//事件初始化
this._initEvent();
},
//返回滚动页数
pagesCount:function(){
return this.section.length;
},
//向上滚动,改变对象的index属性值,每滚动一次属性值自减一
prev:function(){
var me=this;
if(me.index>0){
me.index--;
}
//调用滚动方法,该方法根据index值确定滚动大小
me._scrollPage();
},
//向下滚动,改变对象的index属性值,每滚动一次属性值自加一
next:function(){
var me=this;
if(me.index<me.pagesCount){
me.index++;
}
me._scrollPage();
},
_initPaging:function(){
var me=this,
pagesClass=me.selectors.pages.substring(1);
me.activeClass=me.selectors.active.substring(1);
var pageHtml="<ul class="+pagesClass+">";
for(var i=0;i<me.pagesCount;i++){
pageHtml+="<li></li>";
}
pageHtml+="</ul>";
me.element.append(pageHtml);
var pages=me.element.find(me.selectors.pages);
me.pageItem=pages.find("li");
//页面初始化时,给第一个li添加active类名
me.pageItem.eq(me.index).addClass(me.activeClass);
},
_initEvent:function(){
var me=this;
//绑定点击事件,这里使用事件委托的形式,减少资源消耗
me.element.on("click",me.selectors.pages+" li",function(){
me.index=$(this).index();
me._scrollPage();
});
//绑定滚轮事件,同上
me.element.on("mousewheel DOMMouseSroll",function(e){
var delta=e.originalEvent.wheelDelta||-e.originalEvent.detail;
//console.log(delta);
if(delta>0){
me.prev();
}
if(delta<0){
me.next();
}
})
},
_scrollPage:function(){
var me=this,
dest=me.section.eq(me.index).position();
if(!dest)return;
if(_prefix){
// console.log("nihao")
me.sections.css(_prefix+"transition","all "+me.settings.duration+"ms "+me.settings.easing);
var translate="translateY(-"+dest.top+"px)";
me.sections.css(_prefix+"transform",translate);
}else{
var animateCss={top:-dest.top};
me.sections.animate(animateCss,me.settings.duration);
}
me.pageItem.eq(me.index).addClass(me.activeClass).siblings("li").removeClass(me.activeClass);
}
}
return PageSwitch;//返回构造函数,赋给外面接受的PageSwitch
})();
$.fn.PageSwitch=function(options){
//单例模式创建实例对象
return this.each(function(){
var me=$(this),
instance=me.data("PageSwitch");
if(!instance){
instance=new PageSwitch(me,options);
me.data("PageSwitch",instance);
}
})
}
$.fn.PageSwitch.defaults={
selectors:{
sections:".sections",
section:".section",
pages:".pages",
active:".active"
},
index:0,
easing:"ease",
duration:1000
}
})(jQuery);
总结一下:
1.本插件多次运用闭包,减少全局变量的外露,避免污染全局
2.采用构造方法却不用再HTML代码中实例化,只需建立jQuery对象调用挂载在jQuery原型上的PageSwitch方法,该PageSwitch方法利用单利模式返回唯一一个PageSwitch实例对象
3.在原型对象的运用上比较灵活,PageSwitch构造方法的原型上挂载了事件方法,$.fn上挂载了PageSwitch实例对象和默认参数
4.在兼容性处理上也单独写了_prefix
最后,挂上HTML代码,供大家调试使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pageSwitch.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
#container,
.sections,
.section {
height: 100%;
position: relative;
}
.section {
background-color: #000;
background-size: cover;
background-position: 50% 50%;
text-align: center;
color: white;
}
#section0 {
background: url(img/1.jpg);
}
#section1 {
background: url(img/2.jpg);
}
#section2 {
background: url(img/3.jpg);
}
#section3 {
background: url(img/4.jpg);
}
.pages {
position: fixed;
right: 10px;
top: 50%;
list-style: none;
}
.pages li {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
margin: 10px 5px;
cursor: pointer;
}
.pages li.active {
width: 14px;
height: 14px;
border: 2px solid #FFFE00;
background: none;
margin-left: 0;
}
</style>
</head>
<body>
<div id="container">
<div class="sections">
<div class="section" id="section0">
<h3>this is the page0</h3>
</div>
<div class="section" id="section1">
<h3>this is the page1</h3>
</div>
<div class="section" id="section2">
<h3>this is the page2</h3>
</div>
<div class="section" id="section3">
<h3>this is the page3</h3>
</div>
</div>
</div>
<script type="text/javascript">
$("#container").PageSwitch();
</script>
</body>
</html>
本插件只是实现了竖屏滚动,也没有实现键盘事件,还具有很大的扩展空间