Swiper移动端会员级别触摸选项卡切换代码



97 387 130



特效描述:Swiper移动端 会员级别触摸 选项卡切换代码,Swiper移动端会员级别手机页面触摸选项卡切换内容变换效果代码。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/global.css">
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="css/agent.min.css">

2. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>

3. HTML代码

<header>代理级别</header>
<div> 
  <!--切换-->
  <section class="swiper-container" >
    <section class="swiper-wrapper">
      <section class="swiper-slide">
        <section class="agent_level">
          <section class="levelbox level01">
            <p class="mb10 clearfix"><span class="fl"><img alt="" src="images/toux.jpg"></span><span class="white f15 name">社会主义无产阶级拥护者</span></p>
            <p class="f15 white">普通会员</p>
            <p class="f12 white">您的当前级别</p>
            <p class="levelIcon"><img alt="" src="images/levelIcon.png"></p>
          </section>
        </section>
      </section>
      <section class="swiper-slide">
        <section class="agent_level">
          <section class="levelbox level02">
            <p class="mb10 clearfix"><span class="fl"><img alt="" src="images/toux.jpg"></span><span class="white f15 name">xiaojia123456</span></p>
            <p class="f15 white">超级会员</p>
            <p class="f12 white">您的当前级别</p>
            <p class="levelIcon"><img alt="" src="images/levelIcon.png"></p>
          </section>
        </section>
      </section>
      <section class="swiper-slide">
        <section class="agent_level">
          <section class="levelbox level03">
            <p class="mb10 clearfix"><span class="fl"><img alt="" src="images/toux.jpg"></span><span class="white f15 name">xiaojia123456</span></p>
            <p class="f15 white">合伙人</p>
            <p class="f12 white">您的当前级别</p>
            <p class="levelIcon"><img alt="" src="images/levelIcon.png"></p>
          </section>
        </section>
      </section>
      <section class="swiper-slide">
        <section class="agent_level">
          <section class="levelbox level04">
            <p class="mb10 clearfix"><span class="fl"><img alt="" src="images/toux.jpg"></span><span class="white f15 name">xiaojia123456</span></p>
            <p class="f15 white">黄金合伙人</p>
            <p class="f12 white">您的当前级别</p>
            <p class="levelIcon"><img alt="" src="images/levelIcon.png"></p>
          </section>
        </section>
      </section>
    </section>
  </section>
  <!--等级内容-->
  <section class="level_con">
    <section class="pd15">
      <h4 class="f16" style="color:#2274CF">如何成为普通会员?</h4>
      <p class="f14">邀请两个好友成功兑换,即成为普通会员</p>
      <h4 class="f16" style="color:#2274CF">普通会员有什么权益?</h4>
      <p class="f14">可按照普通会员价兑换积分<br>
        注1:不赚取好友的兑换差价,且好友没有上下级隶属关系<br>
        注2:日后升级合伙人,好友清零,有资源者建议先升级合伙</p>
      <a href="javascript:void(0)" class="button">前去分享</a> </section>
  </section>
  <section class="level_con" style="display:none;">
	<section class="pd15">
      <h4 class="f16" style="color:#00A0DB">如何成为超级会员?</h4>
      <p class="f14">邀请两个好友成功兑换,即升级为超级会员</p>
      <h4 class="f16" style="color:#00A0DB">超级会员有什么权益?</h4>
      <p class="f14">可按照超级会员价兑换积分<br>
        注1:不赚取好友的兑换差价,且好友没有上下级隶属关系<br>
        注2:日后升级合伙人,好友清零,有资源者建议先升级合伙</p>
      <a href="javascript:void(0)" class="button" style="background-color:#00A0DB">前去分享</a> </section>
  </section>
  <section class="level_con" style="display:none;">
	<section class="pd15">
      <h4 class="f16" style="color:#FA4846">如何成为合伙人?</h4>
      <p class="f14">邀请两个好友成功兑换,即升级为合伙人</p>
      <h4 class="f16" style="color:#FA4846">合伙人有什么权益?</h4>
      <p class="f14">可按照合伙人价兑换积分<br>
        注1:不赚取好友的兑换差价,且好友没有上下级隶属关系<br>
        注2:日后升级合伙人,好友清零,有资源者建议先升级合伙</p>
      <a href="javascript:void(0)" class="button" style="background-color:#FA4846">前去分享</a> </section>
  </section>
  <section class="level_con" style="display:none;">
	<section class="pd15">
      <h4 class="f16" style="color:#C7A066;">如何成为黄金合伙人?</h4>
      <p class="f14">邀请两个好友成功兑换,即升级为黄金合伙人</p>
      <h4 class="f16" style="color:#C7A066;">黄金合伙人有什么权益?</h4>
      <p class="f14">可按照黄金合伙人价兑换积分<br>
        注1:不赚取好友的兑换差价,且好友没有上下级隶属关系<br>
        注2:日后升级合伙人,好友清零,有资源者建议先升级合伙</p>
      <a href="javascript:void(0)" class="button" style="background-color:#C7A066">前去分享</a> </section>
  </section>
</div>
<script>
    $(function(){
		var mySwiper = new Swiper(".swiper-container", {
    slidesPerView: "auto",
    centeredSlides: !0,
    watchSlidesProgress: !0,
    pagination: ".swiper-pagination",
    onProgress: function(a) {
        var b, c, d;
        for (b = 0; b < a.slides.length; b++) c = a.slides[b],
        d = c.progress,
        scale = 1 - Math.min(Math.abs(.2 * d), 1),
        es = c.style,
		//透明度的改变,原代码如下   es.opacity = 1 - Math.min(Math.abs(d / 2), 1),
        es.opacity = 1, 
        es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = "translate3d(0px,0," + -Math.abs(150 * d) + "px)"
    },
    onSetTransition: function(a, b) {
        for (var c = 0; c < a.slides.length; c++) es = a.slides[c].style,
        es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = b + "ms"
    },
	onTransitionEnd:function(swiper){
		console.log(swiper.activeIndex)
		$(".level_con").hide();
		$(".level_con").eq(swiper.activeIndex).show();
	}
	});
	});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滚动切换 滑动选项卡切换 拖动 选项卡切换 滑动手风琴 图片拖动 图片滑动 图片切换 文字切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到