zoom放大组件

发表于   |  更新于   |   分类于   |  

实现mouseenter放大，mouseleave恢复原状
兼容到ie7
git地址
演示

使用步骤

属性说明

1
2
3
4
5
6
7
8
9
10
11
12
13
this.elem = o.element||$("document"); //触发放大的jquery元素
this.timeIn = o.timeIn||200;
this.timeOut = o.timeOut||200;
this.edgehided = o.edgehided||false; //限定元素放大的时候，不能超出父元素
this.width = o.width; //原来的宽度，可以改成js读取
this.height = o.height;
var size = o.size||1; //放大的倍数
this.nwidth = this.width*size;
this.nheight = this.height*size;
this.left = (this.nwidth - this.width) /2;
this.top = (this.nheight - this.height) /2;
this.triggeredselector = o.triggeredselector; //触发放大的最小标签
this.triggerselectors = o.triggerselectors||[];

调用

1
2
3
4
5
6
7
8
9
10
11
.imgbg{
  width: 200px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
img{
  position: absolute; /*使用绝对定位，实现居中放大*/
  width:200px;
  height:100px;
}
1
2
3
4
5
6
7
8
9
10
new ZoomBox({
  "element":$(".imgbg img"), 
  "edgehided":true,
  "triggeredselector":"img",
  "timeIn":400,
  "timeOut":200,
  "width":200,
  "height":100,
  "size":1.2
});