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

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

如下效果：

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

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

js修炼——手写全屏滚动插件相关推荐

jQuery全屏滚动插件 Fullpage.js 及 move.js
Fullpage.js 引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> &l ...
jquery，js实现手机端全屏轮播图手动滑动+自动切换(autoplay)
jquery,js实现手机端全屏轮播图使用了swiper插件,可手动滑动切换也可自动切换效果图 css代码只是作为参考,可以根据你自己的需求去改,这里我用的是上下两张背景图,图自行修改 html ...
前端jQuery的全屏滚动插件（使用方法）
全屏滚动:无滚动条,一个屏幕一个屏幕的滚动 gitHub: GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Cre ...
拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
全屏滚动插件fullPage.js
效果效果本文介绍使用fullPage.js插件可轻易创建全屏滚动网站.很多网站只有一个首页,它是由多个可以滚动的全屏内容组成,使用鼠标滚动或方向键可控制滚屏,支持CSS3动画和手机触屏,效果非常高大 ...
pagePiling.js - 创建美丽的全屏滚动效果
在线演示在线演示本地下载全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主 ...
jQuery全屏滚动插件fullPage.js
演示下载简介如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),Q ...
Jquary全屏滚动插件fullpage.js的使用
1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件,它能很方便的制作出全屏网站 2.引包 CDNJS地址: https://cdnjs.com/librarie ...
html页面左右滑动固定插件,jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米.魅族.苹果等等知名站点的新品页面,以及360.百度等网站的专题页面越来越采用分屏滚动的风格. 当然实现这种风格的方法有多种 ...

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

js修炼——手写全屏滚动插件相关推荐

最新文章

热门文章