pageSwitch使用与修改

pageSwitch 简介

pageSwitch适用场景为全屏切换,即一切一屏,移动与web端单页切换,制作翻页H5等等,并且在此基础上实现了超过一百种切换效果。

GitHub地址:https://github.com/qiqiboy/pageSwitch

pageSwitch修改

由于原作者版本没有区别当前页面的标签,

因此在原基本上修改了firePlay函数,大约在840行左右。原firePlay函数

firePlay:function(){
    var self=this;
        if(this.playing){
            this.playTimer=setTimeout(function(){
                self.slide((self.current+1)%(self.loop?Infinity:self.length));
                },this.interval);
            }
        return this;
    }

在此基本上,为了让当前显示页面添加标识,为便当前操作,内容动画更改等提供接口,修改如下

firePlay:function(){
        var self=this;
        each(self.pages,function(page){
            var pcn=page.className.replace(/\s+current/g,"");
            page.className=pcn;
        });
        self.pages[self.current].className +=' current';
        if(this.playing){
            this.playTimer=setTimeout(function(){
                self.slide((self.current+1)%(self.loop?Infinity:self.length));
            },this.interval);
        }
        return this;
    }

也就在给予当前显示页面加上class=current,这样更方便页面内元素与动画的操作与实现。


   转载规则


《pageSwitch使用与修改》 Sterne Lee 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
【转载】Web Animation API从入门到上座 【转载】Web Animation API从入门到上座
远观:认识WAAPI 当我们谈及网页动画时,自然联想到的是CSS3动画、JS动画、SVG动画、APNG动画等技术以及jQuery.animate()等动画封装库,根据实际动画内容设计去选择不同的实现方式。然而,每个现行的动画技术都存在一定的
2016-02-26
下一篇 
用Canvas来实时处理Video 用Canvas来实时处理Video
结合HTML5下的video和canvas的功能,你可以实时处理视频数据,如播放暂停等,解决各平台的H5播放视频的bug,并为正在播放的视频添加各种各样的视觉效果,以使用JavaScript代码实现chroma-keying特效(也被称为“
2016-01-27
  目录