图片/图形
jfMagnify 放大任何HTML元素jQuery放大镜插件
PetitQ
jfMagnify 是一款可以放大任何 HTML 元素的 jQuery 放大镜插件。该放大镜插件不仅可以放大图片，还可以放大任何的 HTML 元素，例如超链接，文本等。该放大镜插件的原理是通过克隆元素和它的子元素，并将克隆的元素进行放大应用到放大镜中。
使用方法
使用该放大镜插件需要在页面中引入 jquery 和 jquery.jfMagnify.js 以及 jquery UI 文件。
也想出现在这里？联系我们吧
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.jfMagnify.js"></script>
HTML 结构
放大镜效果中的所有元素都要放置在一个容器中进行管理。
<div class="magnify">
<div class="magnify_glass"></div>
<div class = "element_to_magnify">
<img src="image1.jpg" draggable="false"/>
</div>
</div>
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-*属性来设定。
<div class="magnify"
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"
});
Github 地址：https://github.com/fonstok/jfMagnify
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
