移动web开发入门-学习笔记-7

于 2021-09-01 18:05:53 发布
阅读量81 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pakho_lin/article/details/120045483
版权

文章目录

Swipe快速切换插件

一、Swipe垂直滚动

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <title>Swiper Demo1</title>
    <link rel="stylesheet" type="text/css" href="../js/swiper/idangerous.swiper2.7.6.css">
    <link rel="stylesheet" type="text/css" href="../css/index.css">
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide bg-red">1</div>
            <div class="swiper-slide bg-blue">2</div>
            <div class="swiper-slide bg-green">3</div>
        </div>
    </div>
    <script type="text/javascript" src="../js/jquery/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../js/swiper/idangerous.swiper2.7.6.min.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
</body>
</html>

JS

/*垂直滚动:Demo1*/
var swiper = new Swiper(".swiper-container", {
	mode: 'vertical'
});

CSS

@charset "utf-8";

*{margin:0; padding: 0;}

html,body{width: 100%; height: 100%;}

.swiper-container{width: 100%; height: 100%;}
.swiper-wrapper{width: 100%; height: 100%;}
.swiper-slide{width: 100%; height: 100%;}

.bg-red{background:red;}
.bg-blue{background: blue;}
.bg-green{background: green;}

.bg-002{background: url(../image/002.jpg); background-size:cover;}

.bg-1png{background: url(../image/001.png); background-size:cover;}
.bg-2png{background: url(../image/002.png); background-size:cover;}
.bg-3png{background: url(../image/003.png); background-size:cover;}
.bg-4png{background: url(../image/004.png); background-size:cover;}


.tabs {z-index: 999; width: 100%; position: fixed; left: 0; bottom: 0; height: 45px; line-height: 45px; background: #fff; color: #333; border-top: 1px solid #ddd;}
.tabs a{display: inline-block;width:23%;text-align: center; font-size:14px;color:#333;text-decoration: none;}
.tabs a.active{color:#e40;background: #ddd;}

.swiper-scrollbar{z-index:999; position: absolute; bottom: 5px; left: 0; width: 100%; height: 10px; background: #fff;}

二、progress插件使用

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <title>Swiper Demo2</title>
    <link rel="stylesheet" type="text/css" href="../js/swiper/idangerous.swiper2.7.6.css">
    <link rel="stylesheet" type="text/css" href="../css/index.css">
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide bg-red">1</div>
            <div class="swiper-slide bg-blue">2</div>
            <div class="swiper-slide bg-green">3</div>
        </div>
    </div>
    <script type="text/javascript" src="../js/jquery/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../js/swiper/idangerous.swiper2.7.6.min.js"></script>
    <script type="text/javascript" src="../js/swiper/idangerous.swiper.progress.min.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
</body>

</html>

JS

/*Progress插件：Demo2*/
var swiper = new Swiper(".swiper-container", {
	progress: true,
	onProgressChange: function(swiper){
        for (var i = 0; i < swiper.slides.length; i++){
          var slide = swiper.slides[i];
          var progress = slide.progress;
          var scale, translate, opacity;
          if (progress<=0) {
            opacity = 1 - Math.min(Math.abs(progress),1);
            scale = 1 - Math.min(Math.abs(progress/2),1);
            translate = progress*swiper.width;  
          }
          else {
            opacity = 1 - Math.min(Math.abs(progress/2),1);
            scale=1;
            translate=0; 
          }
          slide.style.opacity = opacity;
          swiper.setTransform(slide,'translate3d('+(translate)+'px,0,0) scale('+scale+')');
        }
      },
      onTouchStart:function(swiper){
        for (var i = 0; i < swiper.slides.length; i++){
          swiper.setTransition(swiper.slides[i], 0);
        }
      },
      onSetWrapperTransition: function(swiper, speed) {
        for (var i = 0; i < swiper.slides.length; i++){
          swiper.setTransition(swiper.slides[i], speed);
        }
      }
});
// Set Z-Indexes
    for (var i = 0; i < swiper.slides.length; i++){
      swiper.slides[i].style.zIndex = swiper.slides.length - i;
    }

三、3D-flow插件使用

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <title>Swiper Demo3</title>
    <link rel="stylesheet" type="text/css" href="../js/swiper/idangerous.swiper2.7.6.css">
    <link rel="stylesheet" type="text/css" href="../js/swiper/idangerous.swiper.3dflow.css">
    <link rel="stylesheet" type="text/css" href="../css/index.css">
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide bg-red">1</div>
            <div class="swiper-slide bg-blue">2</div>
            <div class="swiper-slide bg-green">3</div>
        </div>
    </div>
    <script type="text/javascript" src="../js/jquery/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../js/swiper/idangerous.swiper2.7.6.min.js"></script>
    <script type="text/javascript" src="../js/swiper/idangerous.swiper.3dflow.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
</body>

</html>

JS

/*3D Flow 插件使用：Demo3*/
var swiper = new Swiper(".swiper-container", {
  tdFlow: {}
});

四、scrolle-bar插件使用

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <title>Swiper Demo4</title>
    <link rel="stylesheet" type="text/css" href="../js/swiper/idangerous.swiper2.7.6.css">
    <link rel="stylesheet" type="text/css" href="../js/swiper/idangerous.swiper.scrollbar-2.4.1.css">
    <link rel="stylesheet" type="text/css" href="../css/index.css">
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide bg-red">1</div>
            <div class="swiper-slide bg-blue">2</div>
            <div class="swiper-slide bg-green">3</div>
        </div>
    </div>
    <div class="swiper-scrollbar">
    </div>
    <script type="text/javascript" src="../js/jquery/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../js/swiper/idangerous.swiper2.7.6.min.js"></script>
    <script type="text/javascript" src="../js/swiper/idangerous.swiper.scrollbar-2.4.1.min.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
</body>

</html>

JS

/*scroll Bar 插件使用： Demo4*/
var swiper = new Swiper(".swiper-container", {
    scrollbar: {
        container : '.swiper-scrollbar',
        draggable : true,
        hide: true,
        snapOnRelease: true
    }
});

五、tab切换综合

HTML

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
	<title>Swiper Demo5</title>
	<link rel="stylesheet" type="text/css" href="../js/swiper/idangerous.swiper2.7.6.css">
	<link rel="stylesheet" type="text/css" href="../css/index.css">
</head>
<body>

<div class="swiper-container">

	<div class="swiper-wrapper">
		<div class="swiper-slide bg-1png"></div>
		<div class="swiper-slide bg-2png"></div>
		<div class="swiper-slide bg-3png"></div>
		<div class="swiper-slide bg-4png"></div>
	</div>

</div>

<div class="tabs">
	<a href="" class="active">首页</a>
	<a href="">课程</a>
	<a href="">发现</a>
	<a href="">我的</a>
</div>

<script type="text/javascript" src="../js/jquery/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../js/swiper/idangerous.swiper2.7.6.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
</body>
</html>

JS

/*Tab 综合示例 :Demo5*/
var swiper = new Swiper(".swiper-container", {
    onSlideChangeStart: function(swiper) {
        var index = swiper.activeIndex;
        $(".tabs a").removeClass("active");
        $(".tabs a").eq(index).addClass("active");
    }
});

$(".tabs a").click(function(e){
    e.preventDefault();
    var index = $(this).index();
    $(".tabs a").removeClass("active");
    $(this).addClass("active");
    swiper.swipeTo(index);
    return false;
});
wuyi~lin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值