锤子官网3D翻转特效banner插件

2024年5月5日 120次阅读 来源: bibo

锤子官网3D翻转特效banner插件

**每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的banner，感觉科技感十足
这么有趣的效果，自己也很想试一试能否实现，于是就核心的特效做了代码的实现
同时也将代码进行了封装，做成了可以供大家引用的插件
欢迎大家体验，同时提出意见**

html页面代码

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width"> 
<title>tBanner</title> 
</head> 
<body> 
<div class="container"> 
<div class="banner"></div> 
</div> 
<script type="text/javascript" src="../libs/jquery-3.2.1/jquery-3.2.1.min.js"></script> 
<script type="text/javascript" src="./scripts/3dBanner.js"> 
</script> 
<script type="text/javascript"> 
// 调用插件函数，传入参数实现效果 
B({ 
container:".container", 
banner:".banner", 
initDeg: 10, 
url: "../images/img1.jpg", 
con_height: 400 
}); 
</script> 
</body> 
</html>

引入js插件使用说明

//         该插件依赖于jquery
//         使用者需要在页面中书写这样的标签
//          <div class="">
//          <div class=""></div>
//          </div>
//         引入该插件后会得到一个3dBanner方法，可以全局调用
//         方法的参数data 是一个对象
//         下面是参数的说明
//          {
//          container:  容器盒子的类名       字符串
//          banner：    展示banner盒子的类名 字符串
//          initDeg:    最大旋转角度         数值
//          url:        banner背景图路径     字符串
//          con_height: 容器盒子的高度       数值 

//          }

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);
    原文作者：bibo
    原文地址: https://segmentfault.com/a/1190000011728963
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞