js修炼——手写全屏滚动插件

来源：互联网发布：盗墓笔记宠物进阶数据编辑：程序博客网时间：2024/05/17 08:40

全屏滚动是目前网站开发常用的效果，笔者也曾使用过类似插件，但是对此类插件的开发一直抱有强烈兴趣，而今在前人的经验指导下，终于领悟到了一些插件开发的思维。

如下效果：

接下来看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>

本插件只是实现了竖屏滚动，也没有实现键盘事件，还具有很大的扩展空间

阅读全文

0 0