HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 开发工具 查看内容

jquery仿JD商品切换选项卡特效

2016-12-2 10:34| 发布者: html5cn| 查看: 674| 评论: 0

摘要: 这是一款使用SuperSlide.js来制作的仿**商品切换选项卡jquery特效。该选项卡特效兼容ie8浏览器,适合用于制作各种商品切换展示效果,非常实用。
使用方法
在页面中引入样式文件style.css和jquery.min.js、jquery.SuperSlide.js文件。
<link rel="stylesheet" href="style.css">
<script src="jquery.min.js"></script>             
<script src="jquery.SuperSlide.js"></script>             
 
HTML结构
该商品切换选项卡的基本HTML结构如下:
<div class="tabox">
      <div class="hd">
        <ul>
          <li class=" ">疯狂抢购</li>
          <li class=" ">猜您喜欢</li>
          <li class=" ">**商品</li>
          <li class=" ">热评商品</li>
          <li class="on">新品上架</li></ul>
      </div>
      <div class="bd">
        <ul class="lh" style="display: none;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/1.1.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">艾家纺全棉加厚磨毛四件套</a></div>
            <div class="p-price">京东价:
              <strong>¥399.00</strong></div>
          </li>
          ......
        </ul>
        <ul class="lh" style="display: none;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.1.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">安钛克(Antec) 黑化外型设计电源</a></div>
            <div class="p-price">京东价:
              <strong>¥399.00</strong></div>
          </li>
          ......
        </ul>
        <ul class="lh" style="display: none;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/3.1.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">冬季健身TOP1!瑞亚特仰卧板加送俯卧撑架</a></div>
            <div class="p-price">京东价:
              <strong>¥187.00</strong></div>
          </li>
          ......
        </ul>
        <ul class="lh" style="display: none;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.3.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">希捷(Seagate)1TB </a></div>
            <div class="p-price">京东价:
              <strong>¥438.00</strong></div>
          </li>
          ......
        </ul>
        <ul class="lh" style="display: block;">
          <li>
            <div class="p-img ld">
              <a href="http://www.17sucai.com/">
                <img src="images/2.5.jpg"></a>
            </div>
            <div class="p-name">
              <a href="http://www.17sucai.com/">大水牛(BUBALUS)电脑机箱</a></div>
            <div class="p-price">京东价:
              <strong>¥112.00</strong></div>
          </li>
          ......
        </ul>
      </div>
</div>
 
初始化创建
在页面DOM元素加载完毕之后,通过slide()方法来初始化该商品切换选项卡插件:
jQuery(".tabox").slide({delayTime: 0});       


原文链接:http://www.htmleaf.com/jQuery/Tabs/201611234213.html

原作者:未知

本站文章均由 HTML5中国 编辑从其他媒体精选HTML5相关文章转载,仅供网友学习和交流,如果我们的工作有侵犯到您的权益,请及时联系站长QQ:2601929995,我们会在第一时间进行处理!

投稿: 2601929995@qq.com  

鲜花

握手

雷人

路过

鸡蛋

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-21 16:34

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部