图片/图形

放大镜效果jQuery商品橱窗插件

阿里云


Smoothproducts 是一款跨浏览器的带放大镜效果的 jQuery 商品橱窗插件。该商品预览插件类似于淘宝和京东商城的商品预览效果,它带有内部放大镜,点击某个商品缩略图可以切换到全屏大图模式,非常实用。它的特点还有:

使用简单

也想出现在这里?联系我们
创客主机

可以自定义样式

响应式

可以处理不同尺寸的图片

在鼠标滑过图片时会在图片内部进行放大

同一个页面可以有多个实例

使用方法

使用该 jQuery 商品预览插件需要引入 jQuery 和 smoothproducts.min.js,以及 smoothproducts.css 文件。

  1. <link rel="stylesheet" href="css/smoothproducts.css">
  2. <script type="text/javascript" src="js/jquery.min.js"></script>
  3. <script type="text/javascript" src="js/smoothproducts.min.js"></script>

HTML 结构

该 jQuery 商品预览插件的 HTML 结构使用一个带.sp-wrap 的 div 元素作为包裹元素,在它里面放置需要的中等尺寸的图片缩略图,每个缩略图使用一个超链接来包裹,超链接的地址指向高质量大图所在的 URL 地址。缩略图的宽度最好是相同的,高度可以不同。

  1. <div class="sp-wrap">
  2.     <a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
  3.     <a href="images/2.jpg"><img src="images/2_tb.jpg" alt=""></a>
  4. </div>

你还可以通过使用 sp-loading class 添加一个图片加载时的 loading 指示器容器,这个容器会在图片加载完成之后消失。

  1. <div class="sp-loading"><img src="images/sp-loading.gif" alt=""><br>LOADING IMAGES</div>
  2. <div class="sp-wrap">
  3.     <a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
  4.     <a href="images/2.jpg"><img src="images/2_tb.jpg" alt=""></a>
  5. </div>

如果需要在页面加载时显示指定的商品缩略图,而不是第一张缩略图,可以在想要指定的图片的超链接上指定 sp-default class。

  1. <div class="sp-wrap">
  2.     <a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
  3.     <a href="images/2.jpg" class="sp-default"><img src="images/2_tb.jpg" alt=""></a>
  4. </div>

初始化插件

在页面加载完毕之后,通过下面的方法来初始化该商品预览插件。

  1. <script type="text/javascript">
  2.     /* wait for images to load */
  3.     $(window).load( function() {
  4.         $('.sp-wrap').smoothproducts();
  5.     });
  6. </script>

放大镜效果 jQuery 商品橱窗插件

已有 414 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!