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

**每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的banner，感觉科技感十足

这么有趣的效果，自己也很想试一试能否实现，于是就核心的特效做了代码的实现

同时也将代码进行了封装，做成了可以供大家引用的插件

欢迎大家体验，同时提出意见**

html页面代码

tBanner

// 调用插件函数，传入参数实现效果

B({

container:".container",

banner:".banner",

initDeg: 10,

url: "../images/img1.jpg",

con_height: 400

});

引入js插件使用说明

// 该插件依赖于jquery

// 使用者需要在页面中书写这样的标签

//

// 引入该插件后会得到一个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);