当前位置:主页 > 网页特效 > TAB标签 >

jquery仿京东商城商品切换选项卡特效

发布时间:2018/07/10 来源:互联网 浏览: 关键词:jquery 选项卡 tab 
jquery仿京东商城商品切换选项卡特效 jquery仿京东商城商品切换选项卡特效
阿里云

简要教程

这是一款使用SuperSlide.js来制作的仿京东商城商品切换选项卡jquery特效。该选项卡特效兼容ie8浏览器,适合用于制作各种商品切换展示效果,非常实用。

仿京东商城商品切换选项卡jquery特效

使用方法

在页面中引入样式文件style.css和jquery.min.js、jquery.SuperSlide.js文件。

<linkrel="stylesheet"href="style.css">
<scriptsrc="jquery.min.js"></script>            
<scriptsrc="jquery.SuperSlide.js"></script>    

HTML结构

该商品切换选项卡的基本HTML结构如下:

<divclass="tabox">
      <divclass="hd">
        <ul>
          <liclass=" ">疯狂抢购</li>
          <liclass=" ">猜您喜欢</li>
          <liclass=" ">热卖商品</li>
          <liclass=" ">热评商品</li>
          <liclass="on">新品上架</li></ul>
      </div>
      <divclass="bd">
        <ulclass="lh"style="display: none;">
          <li>
            <divclass="p-img ld">
              <ahref="http://www.17sucai.com/">
                <imgsrc="images/1.1.jpg"></a>
            </div>
            <divclass="p-name">
              <ahref="http://www.17sucai.com/">艾家纺全棉加厚磨毛四件套</a></div>
            <divclass="p-price">京东价:
              <strong>¥399.00</strong></div>
          </li>
          ......
        </ul>
        <ulclass="lh"style="display: none;">
          <li>
            <divclass="p-img ld">
              <ahref="http://www.17sucai.com/">
                <imgsrc="images/2.1.jpg"></a>
            </div>
            <divclass="p-name">
              <ahref="http://www.17sucai.com/">安钛克(Antec) 黑化外型设计电源</a></div>
            <divclass="p-price">京东价:
              <strong>¥399.00</strong></div>
          </li>
          ......
        </ul>
        <ulclass="lh"style="display: none;">
          <li>
            <divclass="p-img ld">
              <ahref="http://www.17sucai.com/">
                <imgsrc="images/3.1.jpg"></a>
            </div>
            <divclass="p-name">
              <ahref="http://www.17sucai.com/">冬季健身TOP1!瑞亚特仰卧板加送俯卧撑架</a></div>
            <divclass="p-price">京东价:
              <strong>¥187.00</strong></div>
          </li>
          ......
        </ul>
        <ulclass="lh"style="display: none;">
          <li>
            <divclass="p-img ld">
              <ahref="http://www.17sucai.com/">
                <imgsrc="images/2.3.jpg"></a>
            </div>
            <divclass="p-name">
              <ahref="http://www.17sucai.com/">希捷(Seagate)1TB </a></div>
            <divclass="p-price">京东价:
              <strong>¥438.00</strong></div>
          </li>
          ......
        </ul>
        <ulclass="lh"style="display: block;">
          <li>
            <divclass="p-img ld">
              <ahref="http://www.17sucai.com/">
                <imgsrc="images/2.5.jpg"></a>
            </div>
            <divclass="p-name">
              <ahref="http://www.17sucai.com/">大水牛(BUBALUS)电脑机箱</a></div>
            <divclass="p-price">京东价:
              <strong>¥112.00</strong></div>
          </li>
          ......
        </ul>
      </div>
</div>

初始化创建

在页面DOM元素加载完毕之后,通过slide()方法来初始化该商品切换选项卡插件

jQuery(".tabox").slide({delayTime: 0}); 

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top