更新于

jQ插件-jqzoom图片放大镜

发布于 / 分类: 锋利的JQuery,实例 / 暂无评论 / 阅读量: 653

找了好几个放大镜插件发现全是老旧的,新版jq取消了很多东西,所以导致以前的都无法使用了,索性就自己写了一个新的放大镜插件。

预览图:

使用教程

html结构

<a href="images/01.jpg" class="jqzoom" title="">        
    <img src="images/small_01.jpg" title="迷你图片">        
</a>

通过给a元素一个class为jqzoom的钩子,然后添加一个href属性,指向一张没有压缩的图,也就是big_img。

a元素里面包着一个img元素,该元素显示一张小图。

注意:

如果你改动了小图的图片比例,大图也需要改动为相同比例,而且我并没有强制设置a元素的大小,所以a元素的大小实际上就是小图的大小。

css

.zoompad {
    position: relative;
    display: inline-block;
    border: 1px solid #999;
    background-color: #eee;
}

.zoompad>img {
    vertical-align: middle;
}

.zoomPup {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .3);
    cursor: move;
    display: none;
}

.zoomWindow {
    position: absolute;
    border: 1px solid #999;
    background-color: #eee;
    display: none;
}

.zoomWrapper {
    overflow: hidden;
    position: relative;
}

.zoomWrapper>img {
    position: absolute;
    top: 0;
    left: 0;
}

js插件

<script type="text/javascript" src="js/jquery.jqzoom.js"></script>

在引入jq文件后再引入该插件。

调用方式

$('a.jqzoom').jqzoom();

jqzoom()就是放大镜方法了,他目前支持四个属性

Api说明

jqzoom({
  zoomPupW : 80,
  zoomPupH : 80,
  zoomWrapperW : 340,
  zoomWrapperH : 340
});
属性名参数格式说明是否必须
zoomPupWnumber表示半透明滑块的宽度,默认80,单位pxfalse
zoomPupHnumber表示半透明滑块的高度,默认80,单位pxfalse
zoomWrapperWnumber放大镜显示的宽度,默认340,单位pxfalse
zoomWrapperHnumber放大镜显示的高度,默认340,单位pxfalse

demo预览

地址

插件下载地址

地址1

或者直接去demo里另存为吧!

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了278篇文章

共有433条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
设置
配色方案

布局