素材牛

jQuery产品图片放大镜效果

 所属分类:网页特效-图片展示

 浏览:422次-  下载:1次-  评论:2次-  发布时间:2019-01-24
jQuery产品图片放大镜效果兼容IE8
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:实现如京东等网站产品图片放大缩小效果

详细介绍

注意:jQuery版本要求1.11以上版本,低版本图片无法放大预览。

修改id为etalage的ul中img图片即可

// 默认配置
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, // 是否淡入淡出
    click_to_zoom: false,
    zoom_element: "auto",
    show_descriptions: true,
    description_location: "bottom",
    description_opacity: 0.7,
    small_thumbs: 3, // 小图片展示的数量
    smallthumb_inactive_opacity: 0.4, // 小图片处于非激活状态时的遮罩透明度
    smallthumb_hide_single: true, // 
    smallthumb_select_on_hover: false,
    smallthumbs_position: "bottom", // 小图片的位置
    show_icon: true,
    hide_cursor: false, // 鼠标放到图片时,是否隐藏指针
    speed: 600, // 
    autoplay: true, // 是否自动播放
    autoplay_interval: 6000, // 自动播放时每张图片的停留时间
    keyboard: true,
    right_to_left: false,
}

文件目录结构

  • css
    • ┝ default.css
    • ┝ normalize.css
    • ┝ style.css
  • img
    • ┝ 1-thumb.png
    • ┝ 1.png
    • ┝ 2-thumb.png
    • ┝ 2.png
    • ┝ 3-thumb.png
    • ┝ 3.png
    • ┝ 4-thumb.png
    • ┝ 4.png
    • ┝ 5-thumb.png
    • ┝ 5.png
    • ┝ loading.gif
  • ┝ index.html
  • js
    • ┝ jquery-1.11.3.min.js
    • ┝ jqzoom.js

讨论这个素材(2)回答他人问题或分享使用心得会奖励牛币

mimitu
2019年02月22日

很实用的工具

回复
707092936
2019年06月07日

学习 了

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:1
所需牛币:5 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证