banner 3D 效果自適應

heartFollower 發布于2019-08-22 15:00 / 1186人閱讀

摘要：頁面后臺上傳寬高為輪播計時條點點兼容兼容極速模式插件本文采用了插件

http://xingeedu.com/

頁面


            
                
                    
                        
                    
                
            
            
            
                
                
                        current" href="#" data-slideindex="${vt.index }">

css

#navbar{
    position:relative;
    height:500px;
    overflow:hidden;
    background: url(../../../image/r_loading.gif) #eee no-repeat;
    background-position:center center;    
    background-size:80px 80px;
}
#navbar .slide a{
    background-position:center center;
    display:inline-block;
    width:100%;
    height:500px;
    background-repeat:no-repeat
}

function initBanner(){
        //后臺上傳寬高為1920*500
        var barImg = $("#navbar").find("a");
        barImg.each(function(){
            var imgURL = $(this).data("img");
            $(this).css({"background-image":"url("+imgURL+")"});
        })
        //輪播
        var $box = $("#box"), $indicators = $(".goto-slide"), $effects = $(".effect"), $timeIndicator = $("#time-indicator"), slideInterval = 5000;
        var switchIndicator = function($c, $n, currIndex, nextIndex) {
            $timeIndicator.stop().css("width", 0);
            $indicators.removeClass("current").eq(nextIndex).addClass(
                    "current");
        };
        //計時條
        var startTimeIndicator = function() {
            $timeIndicator.animate({
                width : "100%"
            }, slideInterval);
        };
        //點點    
        $("#controls").on("click", ".goto-slide", function(ev) {
            $box.boxSlider("showSlide", $(this).data("slideindex"));
            ev.preventDefault();
        });
        
        startTimeIndicator();
        
        $box.boxSlider({
               speed : 1000,
               autoScroll : true,
               timeout : slideInterval,
               next : "#next",
               prev : "#prev",
               pause : "#pause",
               effect : "fade",
               blindCount : 15,
               onbefore : switchIndicator,
               onafter : startTimeIndicator
           });
        /兼容ie
        if (window.navigator.userAgent.indexOf("Trident") != -1) {
            //兼容
            $box.boxSlider("option", "effect", "scrollHorz");
        }else{
            //極速模式
            $box.boxSlider("option", "effect", "scrollHorz3d");
        }
    }

插件

本文采用了插件：
http://www.html5tricks.com/demo/Adaptors/index.html

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93075.html

仿照錘子科技官網的banner 3d效果

摘要：以前看到錘子科技官網的效果挺好玩的，一直沒有研究今天看到饑人谷，使用給出了一種實現方式我自己用原生也實現了一遍。我的方法原理，如圖所示，假設圖中的小圓點是中心點的位置為事件發生的位置。在水平方向上，就是元素要旋轉的度數代碼在最下方。以前看到錘子科技官網的banner效果挺好玩的，一直沒有研究；今天看到饑人谷，使用jquery給出了一種實現方式；我自己用原生js也實現了一遍。大致原理相...

Scott 2019-08-22 10:47 評論0 收藏0
錘子官網3D翻轉特效banner插件

摘要：錘子官網翻轉特效插件每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的，感覺科技感十足這么有趣的效果，自己也很想試一試能否實現，于是就核心的特效做了代碼的實現同時也將代碼進行了封裝，做成了可以供大家引用的插件歡迎大家體驗，同時提出錘子官網3D翻轉特效banner插件 **每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的banner，感覺科技感十足這么有趣的效果...

gougoujiang 2019-08-30 13:49 評論0 收藏0
錘子官網3D翻轉特效banner插件

摘要：錘子官網翻轉特效插件每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的，感覺科技感十足這么有趣的效果，自己也很想試一試能否實現，于是就核心的特效做了代碼的實現同時也將代碼進行了封裝，做成了可以供大家引用的插件歡迎大家體驗，同時提出錘子官網3D翻轉特效banner插件 **每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的banner，感覺科技感十足這么有趣的效果...

alogy 2019-08-21 17:15 評論0 收藏0
錘子官網3D翻轉特效banner插件

摘要：錘子官網翻轉特效插件每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的，感覺科技感十足這么有趣的效果，自己也很想試一試能否實現，于是就核心的特效做了代碼的實現同時也將代碼進行了封裝，做成了可以供大家引用的插件歡迎大家體驗，同時提出錘子官網3D翻轉特效banner插件 **每次訪問錘子手機官網的頁面時，都會欣喜的玩耍一番那個會翻轉的banner，感覺科技感十足這么有趣的效果...

meteor199 2019-08-01 17:51 評論0 收藏0