全屏切换效果

AZmake 发布于2019-08-20 16:07 / 1506人阅读

摘要：使背景图始终位于屏幕中心插件的开发方式类级别组件开发即给命名空间添加新的全局函数，也称静态方法例如对象级别组件开发即挂在原型下的方法，这样通过选择器获取的对象实例也能共享该方法，也称动态方法这里例如等需要创建实例来调用页面切换

使背景图始终位于屏幕中心

    #section1,
    #section2,
    #section3,
    #section4{
        background-color: #000;
        background-size: cover;
        background-position: 50% 50%;
        text-align: center;
        color: white;
    }

jquery插件的开发方式

类级别组件开发

即给jquery命名空间添加新的全局函数，也称静态方法

jQuery.myPlugin = function () {
    //do something
}

例如 $.Ajax()、$.extend()

对象级别组件开发

即挂在jQuery原型下的方法，这样通过选择器获取的jquery对象实例也能共享该方法，也称动态方法

$.fn.myPlugin = function () {
    //do something
};

//这里$.fn === $.prototype

例如: addClass() 、 attr() 等,需要创建实例来调用




    
    页面切换
    


    
        
            
                
                    switchPage
                    Create Beautiful Fullscreen Scrolling Websites
                
            
            
                
                    Example
                    HTML markup example to define 4 sections
                    
                
            
            
                
                    Example
                    The plug-in configuration parameters
                    
                
            
            
                
                    THE END
                    Everything will be okay in the end. If it"s not okay, it"s not the end.

(function($){
    "use strict";

    /*说明:获取浏览器前缀*/
    /*实现：判断某个元素的css样式中是否存在transition属性*/
    /*参数：dom元素*/
    /*返回值：boolean，有则返回浏览器样式前缀，否则返回false*/
    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));

    var PageSwitch = (function(){
        function PageSwitch(element, options){
            this.settings = $.extend(true, $.fn.PageSwitch.defaults, options||{});
            this.element = element;
            this.init();
        }

        PageSwitch.prototype = {
            /*说明：初始化插件*/
            /*实现：初始化dom结构，布局，分页及绑定事件*/
            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.direction = me.settings.direction == "vertical" ? true : false;
                me.pagesCount = me.pagesCount();
                me.index = (me.settings.index >= 0 && me.settings.index < me.pagesCount) ? me.settings.index : 0;

                me.canscroll = true;

                if(!me.direction || me.index){
                    me._initLayout();
                }

                if(me.settings.pagination){
                    me._initPaging();
                }

                me._initEvent();
            },
            /*说明：获取滑动页面数量*/
            pagesCount : function(){
                return this.section.length;
            },
            /*说明：获取滑动的宽度（横屏滑动）或高度（竖屏滑动）*/
            switchLength : function(){
                return this.direction == 1 ? this.element.height() : this.element.width();
            },
            /*说明：向前滑动即上一页*/
            prve : function(){
                var me = this;
                if(me.index > 0){
                    me.index --;
                }else if(me.settings.loop){
                    me.index = me.pagesCount - 1;
                }
                me._scrollPage();
            },
            /*说明：向后滑动即下一页*/
            next : function(){
                var me = this;
                if(me.index < me.pagesCount){
                    me.index ++;
                }else if(me.settings.loop){
                    me.index = 0;
                }
                me._scrollPage();
            },
            /*说明：主要针对横屏情况进行页面布局*/
            _initLayout : function(){
                var me = this;
                if(!me.direction){
                    var width = (me.pagesCount * 100) + "%",
                        cellWidth = (100 / me.pagesCount).toFixed(2) + "%";
                    me.sections.width(width);
                    me.section.width(cellWidth).css("float", "left");
                }
                if(me.index){
                    me._scrollPage(true);
                }
            },
            /*说明：主要针对横屏情况进行页面布局*/
            _initPaging : function(){
                var me = this,
                    pagesClass = me.selectors.page.substring(1);
                me.activeClass = me.selectors.active.substring(1);

                var pageHtml = "";
                for(var i = 0 ; i < me.pagesCount; i++){
                    pageHtml += "";
                }
                me.element.append(pageHtml);
                var pages = me.element.find(me.selectors.page);
                me.pageItem = pages.find("li");
                me.pageItem.eq(me.index).addClass(me.activeClass);

                if(me.direction){
                    pages.addClass("vertical");
                }else{
                    pages.addClass("horizontal");
                }
            },
            /*说明：初始化插件事件*/
            _initEvent : function(){
                var me = this;
                /*绑定鼠标滚轮事件*/
                me.element.on("mousewheel DOMMouseScroll", function(e){
                    e.preventDefault();
                    var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
                    if(me.canscroll){
                        if(delta > 0 && (me.index && !me.settings.loop || me.settings.loop)){
                            me.prve();
                        }else if(delta < 0 && (me.index < (me.pagesCount-1) && !me.settings.loop || me.settings.loop)){
                            me.next();
                        }
                    }
                });

                /*绑定分页click事件*/
                me.element.on("click", me.selectors.page + " li", function(){
                    me.index = $(this).index();
                    me._scrollPage();
                });

                if(me.settings.keyboard){
                    $(window).keydown(function(e){
                        var keyCode = e.keyCode;
                        if(keyCode == 37 || keyCode == 38){
                            me.prve();
                        }else if(keyCode == 39 || keyCode == 40){
                            me.next();
                        }
                    });
                }

                /*绑定窗口改变事件*/
                /*为了不频繁调用resize的回调方法，做了延迟*/
                var resizeId;
                $(window).resize(function(){
                    clearTimeout(resizeId);
                    resizeId = setTimeout(function(){
                        var currentLength = me.switchLength();
                        var offset = me.settings.direction ? me.section.eq(me.index).offset().top : me.section.eq(me.index).offset().left;
                        if(Math.abs(offset) > currentLength/2 && me.index < (me.pagesCount - 1)){
                            me.index ++;
                        }
                        if(me.index){
                            me._scrollPage();
                        }
                    },500);
                });

                /*支持CSS3动画的浏览器，绑定transitionend事件(即在动画结束后调用起回调函数)*/
                if(_prefix){
                    me.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function(){
                        me.canscroll = true;
                        if(me.settings.callback && $.type(me.settings.callback) === "function"){
                            me.settings.callback();
                        }
                    })
                }
            },
            /*滑动动画*/
            _scrollPage : function(init){
                var me = this;
                var dest = me.section.eq(me.index).position();
                if(!dest) return;

                me.canscroll = false;
                if(_prefix){
                    var translate = me.direction ? "translateY(-"+dest.top+"px)" : "translateX(-"+dest.left+"px)";
                    me.sections.css(_prefix+"transition", "all " + me.settings.duration + "ms " + me.settings.easing);
                    me.sections.css(_prefix+"transform" , translate);
                }else{
                    var animateCss = me.direction ? {top : -dest.top} : {left : -dest.left};
                    me.sections.animate(animateCss, me.settings.duration, function(){
                        me.canscroll = true;
                        if(me.settings.callback){
                            me.settings.callback();
                        }
                    });
                }
                if(me.settings.pagination && !init){
                    me.pageItem.eq(me.index).addClass(me.activeClass).siblings("li").removeClass(me.activeClass);
                }
            }
        };
        return PageSwitch;
    })();

    $.fn.PageSwitch = function(options){
        return this.each(function(){
            var me = $(this),
                instance = me.data("PageSwitch");

            if(!instance){
                me.data("PageSwitch", (instance = new PageSwitch(me, options)));
            }

            if($.type(options) === "string") return instance[options]();
        });
    };

    $.fn.PageSwitch.defaults = {
        selectors : {
            sections : ".sections",
            section : ".section",
            page : ".pages",
            active : ".active",
        },
        index : 0,        //页面开始的索引
        easing : "ease",        //动画效果
        duration : 500,        //动画执行时间
        loop : false,        //是否循环切换
        pagination : true,        //是否进行分页
        keyboard : true,        //是否触发键盘事件
        direction : "vertical",        //滑动方向vertical,horizontal
        callback : ""        //回调函数
    };

    $(function(){
        $("[data-PageSwitch]").PageSwitch();
    });
})(jQuery);

参考:

海外云主机 GPU服务器半屏全屏切换切换效果图片切换效果 tab切换效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82732.html

提升Android手机主要视频应用全屏播放的观看体验

摘要：为了给用户带来多媒体方面的体验福利，一刻也不能停，现在要提升主要视频应用全屏播放的观看体验。为了给用户带来多媒体方面的体验福利，一刻也不能停，现在要提升主要视频应用全屏播放的观看体验。提升主要视频应用全屏播放的观看体验老板撂下一句话后拂袖而去，剩下的自己体会。经过人工智能的大脑快速处理，提取了几个比较关键的技术点。 1.视频应用，如何判断到视频应用在工作？ 2.全屏播放，如何判断视...

raise_yang 2019-06-21 16:18 评论0 收藏0
在全屏滚动页面下实现鼠标滚轮的子级交互

摘要：由此，我们可以完全屏蔽的默认滚动触发，改用方法控制全屏滚动，解除了全屏滚动与鼠标滚轮事件的强耦合。此外，通过定时器延时秒设置的值，将用户的鼠标滚轮操作强制分为两步，最终实现了目的。需求分析刚进公司产品提出一个需求：在全屏页面中滚动鼠标滚轮更新文本，回滚再恢复原文本，同时不影响全屏页面的正常切换：初始状态 showImg(https://segmentfault.com/img/b...

godiscoder 2019-08-19 17:18 评论0 收藏0
H5打造属于自己的视频播放器（JS篇2）

摘要：回顾算了不回顾了直接搞起，打开中写的播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播放按钮将会隐藏，播放视频，这个不难，在中我们就已经实现。回顾算了不回顾了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打开JS1中写的bvd.js 播放视频播放按钮隐藏视频开始播放当点击播放按钮的时候，播...

sPeng 2019-08-21 14:17 评论0 收藏0