jQuery商品橱窗插件Smoothproducts使用攻略

2021年4月1日12:57:42jQuery商品橱窗插件Smoothproducts使用攻略已关闭评论
广告也精彩

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

jQuery商品橱窗插件Smoothproducts使用攻略

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

方法/步骤

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

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

  1. <divclass="sp-wrap">
  2. <imgsrc="images/1_tb.jpg"alt="">
  3. <imgsrc="images/2_tb.jpg"alt="">
  4. </div>

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

  1. <divclass="sp-loading"><imgsrc="images/sp-loading.gif"alt=""><br>LOADINGIMAGES</div>
  2. <divclass="sp-wrap">
  3. <imgsrc="images/1_tb.jpg"alt="">
  4. <imgsrc="images/2_tb.jpg"alt="">
  5. </div>

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

  1. <divclass="sp-wrap">
  2. <imgsrc="images/1_tb.jpg"alt="">
  3. <imgsrc="images/2_tb.jpg"alt="">
  4. </div>

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

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

 



微信扫描下方的二维码阅读本文

ts小陈