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

来源：互联网发布：863软件孵化器靠谱吗编辑：程序博客网时间：2024/06/05 06:37

每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的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);

阅读全文

0 0