放大镜插件etalage的使用方法

在浏览某宝商品的时候,会有以下的动画,其实就是个放大镜的效果。当然,我们可以用原生的javascript实现这种效果。这里,我今天总结介绍下用jQuery插件etalage 实现这种效果。

659084-f6a7dbf102765a06.webp

u=330550612,2569849051&fm=26&gp=0.jpg

准备工作

我们需要引进的库和插件有:

  • etalage.css
  • jquery-1.11.1.min.jsjquery.etalage.min.js

html中的相关布局

实现放大镜效果主要是由 ul 标签实现,ul 标签里面的 li 标签包含原图 img 标签和放大图 img 标签,需要注意的是:原图的类名必须是 etalage_thumb_image ,放大图的类名则必须是etalage_source_image
例如以下代码:

 

 

 

 

 

觉得好的话记得打赏赞助小灰灰哦,小灰灰灰更有动力的,谢谢

小灰灰

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: