github地址:https://github.com/MakeMoneyMan/hammer_banner (求给小星星)
本来想直接推到首页的,结果有150字限制,好吧那就简单说说思路。
根据观察
1、鼠标距离中心点越远,变化幅度越大。
2、每个banner中的元素变化幅度不一致。(可以推断出,每个元素之间的距离不一样。)(这句是废话,3D效果就是从这里来的。。。)
实现思路
调整每个元素的 translateZ 属性,使之形成“距离”。
转动父元素。
有了思路就好弄了,直接贴上代码。
$.fn.hammer_banner = function () {
var self = this;
//创建遮罩层
var hammerLayout = document.createElement("div");
this.parent().append(hammerLayout);
$(hammerLayout).attr("style", "width: 100%; height: 100%; position: absolute; background: yellow; z-index: 2; opacity: 0;");
//绑定事件
var stageW = this.width();
var stageH = this.height();
$(hammerLayout).on("mousemove", function (e) {
var tmp_1 = ((e.offsetX - stageW/2)/stageW) * 1.05;
var tmp_2 = ((e.offsetY - stageH/2)/stageH) * -4;
// console.log(tmp_2);
self
.attr("style", "transform:rotateY("+tmp_1+"deg) rotateX("+ tmp_2 +"deg);");
$(".warp")
}).on("mouseout", function (e) {
self
.attr("style", "transform:rotateY(0deg) rotateX(0deg);");
});
return this;
}
hammer_banner 模仿锤子官网banner图3D效果,JQuery插件。
效果
演示地址
http://jsbin.com/dehuwucifi/edit?output
使用方法
$(".warp").hammer_banner();