仿锤子手机官网banner幻灯效果 Jquery插件

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();