在浏览某宝商品的时候,会有以下的动画,其实就是个放大镜的效果。当然,我们可以用原生的javascript实现这种效果。这里,我今天总结介绍下用jQuery插件etalage 实现这种效果。
659084-f6a7dbf102765a06.webp准备工作
我们需要引进的库和插件有:
html中的相关布局
实现放大镜效果主要是由 ul 标签实现,ul 标签里面的 li 标签包含原图 img 标签和放大图 img 标签,需要注意的是:原图的类名必须是 etalage_thumb_image ,放大图的类名则必须是etalage_source_image
例如以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <ul id="example1"> <li> <!-- 原图 --> <img class="etalage_thumb_image" src="../picture/1.jpg" alt="pic"> <!-- 放大图 --> <img class="etalage_source_image" src="../picture/1.jpg" alt="pic"> </li> <li> <!-- 原图 --> <img class="etalage_thumb_image" src="../picture/2.jpg" alt="pic"> <!-- 放大图 --> <img class="etalage_source_image" src="../picture/2.jpg" alt="pic"> </li> <li> <!-- 原图 --> <img class="etalage_thumb_image" src="../picture/3.jpg" alt="pic"> <!-- 放大图 --> <img class="etalage_source_image" src="../picture/3.jpg" alt="pic"> </li> <li> <!-- 原图 --> <img class="etalage_thumb_image" src="../picture/4.jpg" alt="pic"> <!-- 放大图 --> <img class="etalage_source_image" src="../picture/4.jpg" alt="pic"> </li> </ul> |
1 2 3 4 5 6 7 8 | 调用参数的方法 $('#example1').etalage({ thumb_image_width: 300,//缩略图的宽度 thumb_image_height: 400,//缩略图的高度 source_image_width: 900,//大图的宽度 source_image_height: 1200,//大图的高度 }); 基本参数 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | $('#example1').etalage({ thumb_image_width: 300,//缩略图的宽度 thumb_image_height: 400,//缩略图的高度 source_image_width: 900,//大图的宽度 source_image_height: 1200,//大图的高度 align:"left",//缩略图区域在屏幕的位置(好像只能是左右) zoom_area_width: 600,//放大区域的宽度-使用:justify调整全行排满(只是行) zoom_area_height: 500,//放大区域的高度 zoom_area_distance: 200,//放大区域距离缩略图的距离 zoom_easing: false,//淡入淡出效果 click_to_zoom: false,//点击一下才可以放大 zoom_element: "auto",// show_descriptions: false,//是否在放大区域显示图片描述的文字 description_location: "top",//图片描述的文字在放大区域的位置 description_opacity: 1,//图片描述的文字在放大区域的透明度 small_thumbs: 3,//缩略图的个数 smallthumb_inactive_opacity: 0.7,//小缩略图未选中的透明度 smallthumb_hide_single: true,// smallthumb_select_on_hover: false,//小缩略图反页效果用hover实现(而不是点击事件) smallthumbs_position: "top",//略缩图的位置,下左右没有上 magnifier_opacity: 0.5,//选择放大区域的除了选中的区域的透明度 magnifier_invert: true,//是否在选择区域的显示对比差 show_icon: false,// icon_offset: 20,// hide_cursor: false,//是否隐藏鼠标箭头 show_hint: true,// hint_offset: 15,// speed: 200,//鼠标在缩略图位置移动的速度在放大区域的延迟单位是:ms autoplay: true,//是否自动轮播,默认是true,也就是默认是自动 autoplay_interval: 1000,//自动轮播的时间间隔 keyboard: true,// right_to_left: false,//轮播的方向是否是从右到左 }); |