PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > Jquery插件 > jQuery图片裁剪 > 正文

    JQuery图片放大镜插件 cloud-zoom

    作者:admin来源:网络浏览:时间:2015-01-24 18:24:21我要评论
    分享到

    内容介绍

    图片放大镜效果多应用于电子商务、图片展示等网站,给用户带来更好的体验。Cloud Zoom是 jQuery 的一个插件。和其他产品相比,Cloud Zoom 具有代码少、功能多、兼容性好等特点,并且支持 Tint、 Soft Focus 和 Inner 三种放大镜模式。

    第一步:引用css、JQuery和插件js文件:

    复制
    1
    2
    3
    4
    5
    6
    7
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
            $('.cloud-zoom').attr('rel','tint:"#f00"');
    })
    </script>
    <script type="text/javascript" src="cloud-zoom.1.0.2.min.js"></script>

    第二步:设置需要放大的图片代码:

    复制
    1
    <a href="images/bigimage03.jpg" class="cloud-zoom"><img src="images//smallimage-3.jpg" alt="" /></a>

    Cloud Zoom 不需要再在 js 代码里调用了,只需要给 a 标签加上 class 为 “cloud-zoom” 就可以实现调用

    参数说明:

    参数 描述 默认值
    zoomWidth 放大镜窗口的宽度,如果是默认值,则和小图片一样。不需要单位,有单位会出错 'auto'
    zoomHeight 放大镜窗口的高度,如果是默认值,则和小图片一样。不需要单位,有单位会出错 'auto'
    position 放大镜窗口的位置,可选 left 、 right 、 top 、 bottom ,也可以指定某个 ID,如 position: 'element1' 'right'
    adjustX 距离小图片的水平位置。不需要单位,有单位会出错 0
    adjustY 距离小图片的垂直位置。不需要单位,有单位会出错 0
    tint 非放大区域的颜色,必须是十六进制颜色,如 '#aa00aa',不能和 softFocus 一起使用 false
    tintOpacity 不透明度,0 是完全透明,1 是完全不透明 0.5
    lensOpacity 镜头鼠标指针不透明度,0 是完全透明,1 是完全不透明,在 tint 和 softFocus 模式下始终透明 0.5
    softFocus 微微的模糊效果,可选 true 或 false,不能和 tint 一起使用 false
    smoothMove 放大区域图片移动的平滑度,数字越高越平滑,为 1 则不平滑 3
    showTitle 显示图片标题,可选 true 或 false true
    titleOpacity 标题不透明度,0 是完全透明,1 是完全不透明 0.5
     

    下载资源:287 下载积分:0
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-123-516-1.html
    相关热词搜索: