• 售前

  • 售后

热门帖子
入门百科

Html5插件教程之添加欣赏器放大镜结果的商品橱窗

[复制链接]
天下无敌522 显示全部楼层 发表于 2021-10-26 13:56:55 |阅读模式 打印 上一主题 下一主题
KeyMob移动端广告平台为应用开辟者和广告主提供应用交叉推广、手机广告优化等一站式移动营销办理方案,使应用开辟者和广告主得到代价的最大化。
一、使用方法

复制代码代码如下:
<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布局

复制代码代码如下:
<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="">
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">
$(window).load( function() {
$('.sp-wrap').smoothproducts();
});
</script>

KeyMob移动端广告平台为应用开辟者和广告主提供应用交叉推广、手机广告优化等一站式移动营销办理方案,使应用开辟者和广告主得到代价的最大化。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作