swiper手机淘宝物流订单查询页面特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

11 41 14



特效描述:手机淘宝 物流订单 查询页面。基于swiper.js制作移动端淘宝物流订单查询,点击查看物流信息,弹出订单物流配送详情页面代码。ps:鼠标或手机左右滑动查看更多物流配送列表。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/shipping.css">
<link rel="stylesheet" type="text/css" href="font/iconfont.css">

2. 引入JS

<script src="js/swiper.min.js"></script>

3. HTML代码

<div id="shipping">
  <div class="swiper-container" id="rotate-swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide rotate-slide">
        <div class="block">
          <div class="header">
            <h3>已揽件</h3>
            <div class="top-info clearfix"><div class="img"><img src="img/sbp.jpg"></div>
              <div class="txt"><p>汇仁 肾宝片 126片 肾阴阳虚 </p><p>中通快递:CC176548554455</p><p class="last">预计明日送达</p></div>
              <div class="icon"><i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></div>
            </div>
          </div>
          <div class="body"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"></div></div></div></div>
          <div class="footer">本数据由菜鸟裹裹提供</div>
        </div>
      </div>
      <div class="swiper-slide rotate-slide">
        <div class="block">
          <div class="header">
            <h3>已揽件</h3>
            <div class="top-info clearfix"><div class="img"><img src="img/sbp.jpg"></div>
              <div class="txt"><p>汇仁 肾宝片 126片 肾阴阳虚 </p><p>中通快递:CC176548554455</p><p class="last">预计明日送达</p></div>
              <div class="icon"><i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></div>
            </div>
          </div>
          <div class="body"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"></div></div></div></div>
          <div class="footer">本数据由菜鸟裹裹提供</div>
        </div>
      </div>
      <div class="swiper-slide rotate-slide">
        <div class="block">
          <div class="header">
            <h3>已揽件</h3>
            <div class="top-info clearfix"><div class="img"><img src="img/sbp.jpg"></div>
              <div class="txt"><p>汇仁 肾宝片 126片 肾阴阳虚 </p><p>中通快递:CC176548554455</p><p class="last">预计明日送达</p></div>
              <div class="icon"><i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></div>
            </div>
          </div>
          <div class="body"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"></div></div></div></div>
          <div class="footer">本数据由菜鸟裹裹提供</div>
        </div>
      </div>
      <div class="swiper-slide rotate-slide">
        <div class="block">
          <div class="header">
            <h3>已揽件</h3>
            <div class="top-info clearfix"><div class="img"><img src="img/sbp.jpg"></div>
              <div class="txt"><p>汇仁 肾宝片 126片 肾阴阳虚 </p><p>中通快递:CC176548554455</p><p class="last">预计明日送达</p></div>
              <div class="icon"><i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></div>
            </div>
          </div>
          <div class="body"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"></div></div></div></div>
          <div class="footer">本数据由菜鸟裹裹提供</div>
        </div>
      </div>
      <div class="swiper-slide rotate-slide">
        <div class="block">
          <div class="header">
            <h3>已揽件</h3>
            <div class="top-info clearfix"><div class="img"><img src="img/sbp.jpg"></div>
              <div class="txt"><p>汇仁 肾宝片 126片 肾阴阳虚 </p><p>中通快递:CC176548554455</p><p class="last">预计明日送达</p></div>
              <div class="icon"><i class="iconfont icon-xiayiyeqianjinchakangengduo"></i></div>
            </div>
          </div>
          <div class="body"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"></div></div></div></div>
          <div class="footer">本数据由菜鸟裹裹提供</div>
        </div>
      </div>
    </div>
    <div class="swiper-pagination" id="rotate-pagination"></div>
  </div>
  <div class="close-btn"><i class="iconfont icon-cuowuguanbiquxiao"></i></div>
</div>
<div id="show-shipping">查看物流</div>
<script src="js/swiper.min.js"></script> 
<script>
    var swiper = new Swiper('#rotate-swiper', {
    	pagination: {
    		el: '#rotate-pagination',
    	},
    	runCallbacksOnInit: true,
    	watchSlidesProgress: true,
    	on: {
    		progress: function() {
    			for (var i = 1; i < this.slides.length; i++) {
    				if (this.slides[i].progress <= 0) {
    					this.slides.eq(i).find(".block").transition(0)
    					this.slides.eq(i).find(".block").transform("rotateZ(" + 13 * Math.abs(this.slides[i].progress) + "deg) translate3d(0, 0, 0)")
    				}
    			}
    		},
    		setTransition: function(transition) {
    			for (var i = 1; i < this.slides.length; i++) {
    				if (this.slides[i].progress <= 0) {
    					this.slides.eq(i).find(".block").transition(transition)
    					rot = 13 * Math.abs(this.slides[i].progress);
    					this.slides.eq(i).find(".block").transform("rotateZ(" + rot + "deg) translate3d(0, 0, 0)")
    				}
    			}
    		},
    		init: function() {
    			this.emit('transitionEnd');
    		},
    		transitionEnd: function() {
    			if (this.slides[this.activeIndex].contentLoaded == undefined) {
    				this.slides.eq(this.activeIndex).find('.swiper-slide').html('<ul><li class="big-icon"><div>20:30<span>07-20</span></div><div><i class="iconfont icon-yunshuzhongwuliu"></i></div><div>您的包裹已送达</div></li><li><div>20:30<span>07-20</span></div><div><i></i></div><div>您的包裹已到达某地</div></li><li><div>20:30<span>07-20</span></div><div><i></i></div><div>您的包裹已到达某地</div></li><li class="big-icon"><div>20:30<span>07-20</span></div><div><i class="iconfont icon-yunshuzhongwuliu"></i></div><div>您的包裹已出库</div></li><li><div>20:30<span>07-20</span></div><div><i></i></div><div>您的包裹已出库</div></li><li><div>20:30<span>07-20</span></div><div><i></i></div><div>您的包裹已出库</div></li><li><div>20:30<span>07-20</span></div><div><i></i></div><div>您的包裹已出库</div></li><li class="big-icon"><div>20:30<span>07-20</span></div><div><i class="iconfont icon-yunshuzhongwuliu"></i></div><div>您的包裹已出库</div></li><li><div>20:30<span>07-20</span></div><div><i></i></div><div>您的包裹已打包</div></li><li><div>20:30<span>07-20</span></div><div><i></i></div><div>您的包裹已出库</div></li><li><div>20:30<span>07-20</span></div><div><i></i></div><div>您的包裹已出库</div></li><li class="big-icon"><div>20:30<span>07-20</span></div><div><i class="iconfont icon-yunshuzhongwuliu"></i></div><div>您的订单已发货</div></li></ul>');
    				new Swiper(this.slides.eq(this.activeIndex).find('.swiper-container'), {
    					direction: 'vertical',
    					slidesPerView: 'auto',
    					freeMode: true,
    				});
    				this.slides[this.activeIndex].contentLoaded = true;
    			}
    		},
    	},
    });
	document.querySelector(".close-btn").onclick=function(){
		document.querySelector("#shipping").style.display='none';
		}
	document.querySelector("#show-shipping").onclick=function(){
		document.querySelector("#shipping").style.display='block';
		}	
</script>



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


热门标签: 滚动导航菜单 滚动切换 图片滚动 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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