• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Html5插件教程之添加浏览器放大镜效果的商品橱窗

    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移动端广告平台为应用开发者和广告主提供应用交叉推广、手机广告优化等一站式移动营销解决方案,使应用开发者和广告主获得价值的最大化。

    上一篇:移动端html5 meta标签的神奇功效
    下一篇:基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Html5插件教程之添加浏览器放大镜效果的商品橱窗 Html5,插件,教程,之,添加,