IScorll和Swiper

一、IScroll基本使用

什麼是iScroll?
iScroll是一個高性能，資源佔用少，無依賴，多平臺的javascript滾動插件。
iScroll不僅僅是滾動。在你的項目中包含僅僅4kb大小的iScroll，能讓你的項目便擁有滾動，縮放，平移，無限滾動，視差滾動，旋轉功能
iScroll基本使用
2.1按照iScroll的規定搭建HTML結構
2.2引入iScroll
2.3創建iScroll對象, 告訴它誰需要滾動
iScroll的版本
針對iScroll的優化。爲了達到更高的性能，iScroll分爲了多個版本。你可以選擇最適合你的版本。
3.1 iscroll.js，這個版本是常規應用的腳本。它包含大多數常用的功能，有很高的性能和很小的體積。
3.2 iscroll-lite.js，精簡版本。它不支持快速跳躍，滾動條，鼠標滾輪，快捷鍵綁定。但如果你所需要的是滾動(特別是在移動平臺) iScroll 精簡版是又小又快的解決方案。
3.3 iscroll-probe.js，探查當前滾動位置是一個要求很高的任務,這就是爲什麼我決定建立一個專門的版本。如果你需要知道滾動位置在任何給定的時間,這是iScroll給你的。
3.4 iscroll-zoom.js，在標準滾動功能上增加縮放功能。
3.5 iscroll-infinite.js，可以做無限緩存的滾動。處理很長的列表的元素爲移動設備並非易事。 iScroll infinite版本使用緩存機制,允許你滾動一個潛在的無限數量的元素。

用法：
1.中文網址: http://caibaojian.com/iscroll-5/

文件來源：
2. 在gitHub官網中搜索，iscroll 選擇第一個文件，並下載；
在HTML中導入iscroll.js，文件，在script 標籤裏創建 new IScroll ;
iscroll.js，所在路徑：iscroll-master\iscroll-master\build

let myScroll = new IScroll('.box'); // 括號裏的爲所需操作的元素， .Box 爲它的類名；


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-iScroll高級使用</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        div{
            width: 50%;
            height: 300px;
            border: 1px solid #000;
            box-sizing: border-box;
            overflow: hidden;
            position: relative;
        }
        dl>dt{
            line-height: 30px;
            text-align: center;
            border-bottom: 1px solid #000;
        }
        .iScrollVerticalScrollbar{          // 自定義的滾動條樣式
            width: 30px;
            height: 100%;
            background: deepskyblue;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 999;
        }
        .iScrollIndicator{   // 自定義的滾動條中的指示器樣式
            width: 100%;
            background: pink;
        }
    </style>
    <script src="js/iscroll.js"></script>
</head>
<body>
<div class="box">
    <dl>
        <dt>我是標題1</dt>
        <dt>我是標題2</dt>
        <dt>我是標題3</dt>
        <dt>我是標題4</dt>
        <dt>我是標題5</dt>
        <dt>我是標題6</dt>
        <dt>我是標題7</dt>
        <dt>我是標題8</dt>
        <dt>我是標題9</dt>
        <dt>我是標題10</dt>
        <dt>我是標題11</dt>
        <dt>我是標題12</dt>
        
    </dl>
</div>
<script>
    let myScroll = new IScroll('.box', {
        mouseWheel: true,  // 滾輪滾動
        // scrollbars: true   // 滾動條顯示
        scrollbars: 'custom'  //自定義滾動條的顯示樣式
    });
    myScroll.on("beforeScrollStart", function () {
        console.log("滾動之前");
    });
    myScroll.on("scrollStart", function () {
        console.log("開始滾動");
    });
    /*myScroll.on("scroll", function () {
        console.log("正在滾動");
    });*/
    myScroll.on("scrollEnd", function () {
        console.log("滾動結束");
    });
</script>
</body>

二、什麼是swiper?

Swiper是純javascript打造的滑動特效插件，面向PC、平板電腦等移動終端。
Swiper能實現觸屏焦點圖、觸屏Tab切換等常用效果。
Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇。
如何使用:
2.1引入swiper對應的 css 和 js 文件
2.2按照框架的需求搭建三層結構
2.3創建一個Swiper對象, 將容器元素傳遞給它

官網：https://www.swiper.com.cn/

使用：官網裏點擊 “中文教程”——Swiper4.x

1.導入所需文件：swiper-4.5.0\swiper-4.5.0\dist 路徑中的 swiper.css和 swiper.js文件；


<head>
    <meta charset="UTF-8">
    <title>02-swiper基本使用</title>
    <link rel="stylesheet" href="css/swiper.css">
    <script src="js/swiper.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .swiper-container{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .swiper-container>ul{
            list-style: none;
        }
    </style>
</head>
<body>
<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 3</li>
    </ul>
</div>
<script>
  let mySwiper = new Swiper ('.swiper-container');
</script>
</body>

三、swiper高級使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-swiper高級使用</title>
    <link rel="stylesheet" href="css/swiper.css">
    <script src="js/swiper.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .swiper-container{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .swiper-container>ul{
            list-style: none;
        }
        .swiper-pagination-bullet{
            background: red;
        }
        .swiper-button-next{
            background: red;
        }
    </style>
</head>
<body>
<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide">Slide 1</li>
        <li class="swiper-slide">Slide 2</li>
        <li class="swiper-slide">Slide 3</li>
    </ul>
    <!-- 如果需要分頁器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要導航按鈕 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<script>
    let mySwiper = new Swiper ('.swiper-container', {
    // 這裏的格式值得注意
        // 如果需要分頁器
        pagination: {
            el: '.swiper-pagination',
        },
        // 如果需要前進後退按鈕
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true, // 循環模式選項
        // autoplay:true, // 自動輪播
        // autoplay: {
        //     delay: 1000,//1秒切換一次
        // },
        speed:5000, //設置切換速度
    });
</script>
</body>
</html>

四、動畫示例

使用Swiper Animate需要先加載swiper.animate.min.js和animate.min.css。
下載：https://www.swiper.com.cn/usage/animate/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-swiper-animation</title>
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/swiper.animate.min.css">
    <script src="js/swiper.js"></script>
    <script src="js/swiper.animate1.0.3.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background: #f00;
            margin: 0 auto;
        }
        @keyframes myFadeIn {
            0% {
                opacity: 0;
                transform: scale(2);
            }

            100% {
                opacity: 1;
                transform: scale(0.5);
            }
        }

        .myFadeIn {
            -webkit-animation-name: myFadeIn;
            animation-name: myFadeIn
        }
    </style>
</head>
<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <!--
            swiper-animate-effect：切換效果，例如 fadeInUp
            swiper-animate-duration：可選，動畫持續時間（單位秒），例如 0.5s
            swiper-animate-delay：可選，動畫延遲時間（單位秒），例如 0.3s
            -->
            <p class="ani" swiper-animate-effect="myFadeIn">內容</p>
        </div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>
<script>
// 這裏的格式值得注意
    var mySwiper = new Swiper ('.swiper-container', {
        on:{
            init: function(){
                swiperAnimateCache(this); //隱藏動畫元素 
                swiperAnimate(this); //初始化完成開始動畫
            },
            slideChangeTransitionEnd: function(){
                swiperAnimate(this); //每個slide切換結束時也運行當前slide動畫
            }
        }
    });
</script>
</body>
</html>

-End

一、IScroll基本使用

二、什麼是swiper?

三、swiper高級使用

四、動畫示例

前端使用 Konva 實現可視化設計器（13）- 折線 - 最優路徑應用【思路篇】

JS-12-對象-封裝 / 繼承

JS-23-DOM事件

WEB前端學習課程推薦

JS-21-對元素內容 / 樣式的操作

JS-15-深拷貝和淺拷貝

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結