素材牛VIP会员

基于zepto响应式Tab选项卡、图片轮播插件

 所属分类:网页特效-选项卡/滑动门

 浏览:3618次  评论:0次  更新时间:2016-08-22
牛币素材VIP可免积分下载
基于zepto响应式Tab选项卡、图片轮播插件兼容IE9
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:兼容电脑、手机端的选项卡tabs+焦点图slider效果

详细介绍

使用方法:

引入必要的JS文件和CSS样式文件

<link href='style.css' rel='stylesheet'/>
<script type="text/javascript" src="zepto.js">script>

<script type="text/javascript" src="tabslider.js">script>

HTML部分

<div id="tabSlider1" class="tabSlider">  
  <ul class="tabSlider-hd">
      <li class="curr">标题1</li>
      <li>标题2</li>
      <li>标题3</li>
  </ul> 
  <div class="tabSlider-bd">      
      <div class="tabSlider-wrap">
          <div class="tabSlider-box curr">
              <ul>
                  <li>text1</li>
                  <li><div style="background:#CF0" onClick="alert(3)">text1</div></li>
                  <li>text1</li>
                  <li>text1</li>
                  <li>text1</li>
                  <li>text1</li>
                  <li>text1</li>
                  <li>text1</li>
              </ul>
          </div>
          <div class="tabSlider-box">
              <ul>
                  <li>text2</li>
                  <li><a href="http://www.baidu.com" style="display:block; background:#C0F; color:#fff;">text2</a></li>
                  <li>text2</li>
                  <li>text2</li>
                  <li>text2</li>
                  <li>text2</li>
                  <li>text2</li>
                  <li>text2</li>
                  <li>text1</li>
                  <li><div style="background:#CF0" onClick="alert(3)">text1</div></li>
                  <li>text1</li>
                  <li>text1</li>
                  <li>text1</li>
                  <li>text1</li>
                  <li>text1</li>
                  <li>text1</li>
              </ul>
          </div>
          <div class="tabSlider-box">
              <ul>
                  <li>text1</li>
                  <li><div style="background:#CF0" onClick="alert(3)">text1</div></li>
                  <li>text1</li>
                  <li>text1</li>
                  <li>text1</li>
                  <li>text1</li>
                  <li>text1</li>
                  <li>text1</li>
                  <li>text3</li>
                  <li>text3</li>
                  <li>text3</li>
                  <li>text3</li>
                  <li>text3</li>
                  <li>text3</li>
                  <li>text3</li>
                  <li>text3</li>
              </ul>
          </div>
      </div>  
  </div>
</div>

插件初始化、配置

<script type="text/javascript">
$(function(){
	app.TabSlider('#tabSlider1');
});
script>

三种效果请看演示,或下载附件查看


相关素材 - 选项卡/滑动门

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)