html中放大镜插件,jfMagnify-可以放大任何HTML元素的jQuery放大镜插件

jfMagnify是一款可以放大任何HTML元素的jQuery放大镜插件。该放大镜插件不仅可以放大图片，还可以放大任何的HTML元素，例如超链接，文本等。

该放大镜插件的原理是通过克隆元素和它的子元素，并将克隆的元素进行放大应用到放大镜中。

使用方法

使用该放大镜插件需要在页面中引入jquery和jquery.jfMagnify.js以及jquery UI文件。

HTML结构

放大镜效果中的所有元素都要放置在一个容器中进行管理。

CSS样式

你需要为该放大镜添加下面的必要的CSS样式：

.magnify {

position: relative;

width: 900px;

height: 675px;

}

.magnify_glass {

z-index: 100;

position: absolute;

overflow: hidden;

}

.element_to_magnify {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

}

#elementBeingMagnified {

}

.magnified_element {

}

初始化插件

在页面DOM元素加载完毕之后，你可以通过jfMagnify()方法来初始化该放大镜插件。

$(".magnify").jfMagnify();

配置参数

center：居中放大区域。可选值还有：top和left，默认值为true。

scale：放大倍数，默认是2X。

containment：定义放大镜的容器。默认是它的直接父元素。

magnifyGlass：定义放大镜元素。默认是.magnify_glass。

magnifiedElement：被克隆元素的额外class名称。可以在css中通过该class来找到该元素。默认为.magnified_element。

magnifiedZone：你希望放大的元素所在的区域。默认是.magnify_glass。

elementToMagnify：要放大的元素。默认是.element_to_magnify。

例如可以如下所示在初始化时传入配置参数：

$(".magnify").jfMagnify({

center: true,

scale:2,

containment:'magnify',

magnifyGlass : '.magnify_glass',

magnifiedElement: '.magnified_element',

magnifiedZone:'.magnify_glass',

elementToMagnify : '.element_to_magnify',

});

所有的配置参数也可以在父容器中使用data-*属性来设定。

data-center = "true"

data-scale ="2"

data-containment =".magnify"

data-magnify-glass = ".magnify_glass"

data-magnified-element = ".magnified_element"

data-magnified-zone =".magnify_glass"

data-element-to-magnify = ".element_to_magnify" >

方法

destroy()：销毁插件。

$(".magnify").data("jfMagnify").destroy();

scaleMe(number)：动态增加或减少放大倍数。

var scaleNum = 2;

$('.plus').click(function(){

scaleNum += .5;

if (scaleNum >=3) {

scaleNum = 3;

};

$(".magnify").data("jfMagnify").scaleMe(scaleNum);

});

update()：该方法用于更新或移动放大镜。

$('.magnify_glass').animate({

'top':'60%',

'left':'60%'

},{

duration: 1200,

progress: function(){

$(".magnify").data("jfMagnify").update();

},

ease: "easeInQuint"

});