浙江 杭州

jQuery实用zoom鼠标滑上产品图片放大插件

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2016-04-06

人气16008

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


bzoom是一款非常实用的jQuery产品图片放大镜插件。该放大镜插件类似于淘宝等商城网站的产品页图片放大镜。可以实现淡入淡出显示图片及图片自动轮播等功能。该放大镜插件主要实现的功能有:

  • 使用淡入淡出的效果进行图片放大和缩小

  • 自动轮播图片或手动切换图片

  • 根据需要设置展示的图片的数量

  • 设置展示图片,小图片和放大图片的尺寸

使用方法

使用该图片放大镜插件之前首先要引入jQuery和jqzoom.js以及插件中提供的style.css文件。

该图片放大镜插件的HTML结构必须如下:

<div class="etalage_wrap">
    <ul id="etalage">
        <li>
            <img class="etalage_thumb_image" src="1-thumb.jpg" title="first img" />
            <img class="etalage_big_image" src="1.jpg"/>
        </li>
        ...
    </ul>
</div>

 

class类名称和ID要和上面的代码保持一致,class="etalage_thumb_image"是页面上展示的图片。class="etalage_big_image"是鼠标滑过时显示的高清大图。

初始化插件

在页面加载完毕之后,可以通过下面的方法来初始化该放大镜插件。

$("#etalage").zoom({
    zoom_area_width: 300,
    autoplay_interval :3000,
    small_thumbs : 4,
    autoplay : false
});

 

配置参数

var _option = {
    align: "left",              // 当前展示图片的位置,则放大的图片在其相对的位置
    thumb_image_width: 300,     // 当前展示图片的宽
    thumb_image_height: 400,    // 当前展示图片的高
    source_image_width: 900,    // 放大图片的宽
    source_image_height: 1200,  // 放大图片的高
    zoom_area_width: 600,       // 放大图片的展示区域的宽
    zoom_area_height: "justify",// 放大图片的展示区域的高
    zoom_area_distance: 10,     // 
    zoom_easing: true,          // 是否淡入淡出
    description_opacity: 0.7,
    small_thumbs: 3,            // 小图片展示的数量
    smallthumb_inactive_opacity: 0.4,   // 小图片处于非激活状态时的遮罩透明度
    smallthumbs_position: "bottom",     // 小图片的位置
    show_icon: true,
    hide_cursor: false,         // 鼠标放到图片时,是否隐藏指针
    speed: 600,                 // 
    autoplay: true,             // 是否自动播放
    autoplay_interval: 6000,    // 自动播放时每张图片的停留时间
}

 

存在的问题

这个放大镜插件只是一个雏形,还存在一些问题,例如:

  • 没有左右箭头来进行更多张图片的轮播,只能展示固定张数的图片

  • 图片之间的间距没有合理的计算,是写死的值

  • 右侧放大的图片,因为没有border的值,导致比左边大那么一点点

查看演示
下载资源:5
下载资源
错误提交:

格式:zip 大小:488.38KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1893.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery实用zoom鼠标滑上产品图片放大插件

我当前G币余额:0 已下载次数:5

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有4 评论)