錘子官網(wǎng)3D翻轉(zhuǎn)特效banner插件

alogy 發(fā)布于2019-08-21 17:15 / 3225人閱讀

摘要：錘子官網(wǎng)翻轉(zhuǎn)特效插件每次訪問錘子手機(jī)官網(wǎng)的頁面時(shí)，都會(huì)欣喜的玩耍一番那個(gè)會(huì)翻轉(zhuǎn)的，感覺科技感十足這么有趣的效果，自己也很想試一試能否實(shí)現(xiàn)，于是就核心的特效做了代碼的實(shí)現(xiàn)同時(shí)也將代碼進(jìn)行了封裝，做成了可以供大家引用的插件歡迎大家體驗(yàn)，同時(shí)提出

錘子官網(wǎng)3D翻轉(zhuǎn)特效banner插件

**每次訪問錘子手機(jī)官網(wǎng)的頁面時(shí)，都會(huì)欣喜的玩耍一番那個(gè)會(huì)翻轉(zhuǎn)的banner，感覺科技感十足
這么有趣的效果，自己也很想試一試能否實(shí)現(xiàn)，于是就核心的特效做了代碼的實(shí)現(xiàn)
同時(shí)也將代碼進(jìn)行了封裝，做成了可以供大家引用的插件
歡迎大家體驗(yàn)，同時(shí)提出意見**

html頁面代碼

 
 
 
 
 
tBanner

引入js插件使用說明

//         該插件依賴于jquery
//         使用者需要在頁面中書寫這樣的標(biāo)簽
//          
//          
//          
//         引入該插件后會(huì)得到一個(gè)3dBanner方法，可以全局調(diào)用
//         方法的參數(shù)data 是一個(gè)對(duì)象
//         下面是參數(shù)的說明
//          {
//          container:  容器盒子的類名       字符串
//          banner：    展示banner盒子的類名 字符串
//          initDeg:    最大旋轉(zhuǎn)角度         數(shù)值
//          url:        banner背景圖路徑     字符串
//          con_height: 容器盒子的高度       數(shù)值 

//          }

js插件核心代碼

        (function(win){

            function fnBanner(data){
                var con_height=data.con_height || 400;
                var ban_height=con_height*0.7;
                var con_padding=con_height*0.15;

                $(data.banner).css({
                height:ban_height+"px",
                width:"80%",
                margin:"0 auto",              
                transition:"transform 0.1s"

                  }).css("background","url("+data.url+") no-repeat center").css(
                  "background-size","contain").css("box-shadow","0 0 15px rgba(0,0,0,0.3)")

                $(data.container).css({height:con_height+"px",
                    padding:con_padding+"px 0",
                    width:"100%",
                    background:"white",
                    border:"1px solid gray",
                    perspective:"1000px"
                }).css("box-sizing","border-box")

            $(data.container).on("mousemove",function(e){
                var offset=$(data.container).offset(); 
                var x=e.pageX-offset.left;  
                var y=e.pageY-offset.top;  

                var centerX=$(data.container).outerWidth()/2;   
                var centerY=$(data.container).outerHeight()/2;

                var distanceX=x-centerX;
                var distanceY=y-centerY;

                var perX=distanceX/centerX;
                var perY=distanceY/centerY;

                var initDeg=data.initDeg || 10;


                $(data.banner).css({
                    transform:"rotateX("+initDeg*-perY+"deg) rotateY("+initDeg*perX+"deg)"
                })

            })

            $(data.container).on("mouseleave",function(){
                $(data.banner).css({
                    transform:""
                })
            })

            console.log("ok");
            }

            win.B=fnBanner;
        })(window);