浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2017-05-09

人气7208

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

  • 使用简单
  • 可以自定义样式
  • 响应式
  • 可以处理不同尺寸的图片
  • 在鼠标滑过图片时会在图片内部进行放大
  • 同一个页面可以有多个实例

使用方法

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

<link rel="stylesheet" href="css/smoothproducts.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/smoothproducts.min.js"></script>                  
                
HTML结构

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

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

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

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

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

<div class="sp-wrap">
    <a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
    <a href="images/2.jpg" class="sp-default"><img src="images/2_tb.jpg" alt=""></a>
</div>                  
                
初始化插件

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

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

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:876.28KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1678.html 非特殊说明,本文版权归原作者所有,转载请注明出处
带放大镜效果的jQuery商品橱窗插件

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)