Web API（7）

その他 2021-03-27 23:20:18 訪問数: null

スワイパー

中国の公式ウェブサイトアドレス：https：//www.swiper.com.cn/

1.プラグイン関連ファイルを紹介します
。2。規定の文法に従って使用します。

注：スワイパーなどでcssファイルjsファイルhtml構造をインポートするには、クラス名を自由に変更しないでください

スワイパーの使い方

1.最初にプラグインをロードします。使用する必要のあるファイルはswiper-bundle.min.jsとswiper-bundle.min.cssです。異なるSwiperバージョンで使用されるファイル名はわずかに異なります。Swiperファイルをダウンロードするか、CDNを使用します

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/**swiper-bundle.min.css**">
</head>
<body>
    ...
    <script src="dist/js/**swiper-bundle.min.js**"></script>
    ...
</body>
</html>

2.HTMLコンテンツ

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

3.もちろん、Swiperのサイズを定義することはできません。

.swiper-container {
    width: 600px;
    height: 300px;
}

4.スワイパーを初期化します

 <script> var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  }) </script>

5.終了しました。おめでとうございます。これで、Swiperは正常に切り替わるはずです。

CommonJsまたはESモジュールとして導入された場合

//CommonJs
var Swiper = require('swiper');    
var mySwiper = new Swiper('.swiper-container', { /* ... */ });

//ES
import Swiper from 'swiper';    
var mySwiper = new Swiper('.swiper-container', { /* ... */ });

スワイパーカルーセル画像1

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>轮播图</title>
        <link rel="stylesheet" type="text/css" href="swiper-6.1.2/package/swiper-bundle.css" />
        <script src="swiper-6.1.2/package/swiper-bundle.js"></script>
        <style>
            html,
            body {
                position: relative;
                height: 100%;
            }

            body {
                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                font-size: 14px;
                color: #000;
                margin: 0;
                padding: 0;
            }

            .swiper-container {
                width: 990px height: 540px;
                margin: 200px auto;
            }

            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }

            img {
                width: 990px;
                height: 540px;
            }

            .swiper-pagination-bullet {
                width: 20px;
                height: 10px;
                border-radius: 0px;
                background-color: white;
            }
        </style>
    </head>

    <body>
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="img/focus1.jpg"></div>
                <div class="swiper-slide"><img src="img/focus2.jpg"></div>
                <div class="swiper-slide"><img src="img/focus3.jpg"></div>
                <div class="swiper-slide"><img src="img/focus4.jpg"></div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>

        </div>
    </body>
    <script>
        var swiper = new Swiper('.swiper-container', {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>

</html>

ここに画像の説明を挿入

スワイパーカルーセル画像2

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Swiper demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

        <!-- Link Swiper's CSS -->
        <link rel="stylesheet" type="text/css" href="css/swiper-bundle.css" />
        <script src="js/swiper-bundle.js"></script>

        <!-- Demo styles -->
        <style>
            body {
                background: #fff;
                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                font-size: 14px;
                color: #000;
                margin: 0;
                padding: 0;
                background-color: rgba(0, 0, 0, 0.5);
            }

            .swiper-container {
                width: 100%;
                padding-top: 50px;
                padding-bottom: 50px;
            }

            .swiper-slide {
                background-position: center;
                background-size: cover;
                width: 300px;
                height: 300px;

            }
        </style>
    </head>

    <body>
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-image:url(./img/focus1.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(./img/focus2.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(./img/focus3.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(./img/focus4.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(./img/focus1.jpg)"></div>

            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>

        <!-- Swiper JS -->
        <script src="../package/swiper-bundle.min.js"></script>

        <!-- Initialize Swiper -->
        <script>
            window.addEventListener('DOMContentLoaded', function() {
                var swiper = new Swiper('.swiper-container', {
                    effect: 'coverflow',
                    grabCursor: true,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    coverflowEffect: {
                        rotate: 50,
                        stretch: 0,
                        depth: 100,
                        modifier: 1,
                        slideShadows: true,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                    },
                });
            })
        </script>
    </body>

</html>

ここに画像の説明を挿入

プラグインの使用の概要

1.プラグインによって実装されている機能を確認します

2.公式ウェブサイトにアクセスして手順を確認します

3.プラグインをダウンロードします

4.デモサンプルファイルを開き、インポートする必要のある関連ファイルを表示して、インポートします。

5.デモサンプルファイルの構造html、スタイルcss、およびjsコードをコピーします

SuperSlider

SuperSliderタブバーの切り替え

ここに画像の説明を挿入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>tab栏切换</title>
        <script src="js/jquery1.42.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="SuperSlide2/jquery.SuperSlide.2.1.3.source.js"></script>
        <style type="text/css">
            /* css 重置 */
            /* css 重置 */
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            body {
                background: #fff;
                font: normal 12px/22px 宋体;
            }

            img {
                border: 0;
            }

            a {
                text-decoration: none;
                color: #333;
            }

            a:hover {
                color: #1974A1;
            }


            /* 本例子css */
            .slideTxtBox {
                width: 450px;
                border: 1px solid #ddd;
                text-align: left;
            }

            .slideTxtBox .hd {
                height: 30px;
                line-height: 30px;
                background: #f4f4f4;
                padding: 0 10px 0 20px;
                border-bottom: 1px solid #ddd;
                position: relative;
            }

            .slideTxtBox .hd ul {
                float: left;
                position: absolute;
                left: 20px;
                top: -1px;
                height: 32px;
            }

            .slideTxtBox .hd ul li {
                float: left;
                padding: 0 15px;
                cursor: pointer;
            }

            .slideTxtBox .hd ul li.on {
                height: 30px;
                background: #fff;
                border: 1px solid #ddd;
                border-bottom: 2px solid #fff;
            }

            .slideTxtBox .bd ul {
                padding: 15px;
                zoom: 1;
            }

            .slideTxtBox .bd li {
                height: 24px;
                line-height: 24px;
            }

            .slideTxtBox .bd li .date {
                float: right;
                color: #999;
            }

            /* 下面是前/后按钮代码，如果不需要删除即可 */
            .slideTxtBox .arrow {
                position: absolute;
                right: 10px;
                top: 0;
            }

            .slideTxtBox .arrow a {
                display: block;
                width: 5px;
                height: 9px;
                float: right;
                margin-right: 5px;
                margin-top: 10px;
                overflow: hidden;
                cursor: pointer;
                background: url(images/arrow.png) 0 0 no-repeat;
            }

            .slideTxtBox .arrow .next {
                background-position: 0 -50px;
            }

            .slideTxtBox .arrow .prevStop {
                background-position: -60px 0;
            }

            .slideTxtBox .arrow .nextStop {
                background-position: -60px -50px;
            }
        </style>

    </head>
    <body>
        <div class="slideTxtBox">
            <div class="hd">

                <!-- 下面是前/后按钮代码，如果不需要删除即可 -->
                <span class="arrow"><a class="next"></a><a class="prev"></a></span>

                <ul>
                    <li>教育</li>
                    <li>培训</li>
                    <li>出国</li>
                </ul>
            </div>
            <div class="bd">
                <ul>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
                </ul>
                <ul>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子：教你备考SAT</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强：高端专业语言教学</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光！</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
                </ul>
                <ul>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学，国际双语课程</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
                    <li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            jQuery(".slideTxtBox").slide();
        </script>

    </body>
</html>

ここに画像の説明を挿入

モバイル用ビデオプラグインzy.media.js

主に、さまざまなブラウザでの一貫性のないビデオ表示の問題を解決するため

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="zy.media.min.css">
    <script src="zy.media.min.js"></script>
    <style type="text/css">
        #modelView {
            background-color: #DDDDDD;
            z-index: 0;
            opacity: 0.7;
            height: 100%;
            width: 100%;
            position: relative;
        }
        
        .playvideo {
            padding-top: auto;
            z-index: 9999;
            position: relative;
            width: 300px;
            height: 200px;
        }
        
        .zy_media {
            z-index: 999999999
        }
    </style>

</head>

<body>

    <div class="playvideo">
        <div class="zy_media">
            <video data-config='{"mediaTitle": "小蝴蝶"}'>
                    <source src="mov.mp4" type="video/mp4">
                    您的浏览器不支持HTML5视频
                </video>

        </div>
        <div id="modelView">&nbsp;</div>
    </div>
    <script>
        zymedia('video', {
            autoplay: false
        });
    </script>

</body>

</html>

フレーム

フレームワークとプラグインの違い

  • フレームワーク：大きく、すべてにソリューションの完全なセットがあります
  • プラグイン：特定の機能のための小さいが特定のソリューション。

bootstarpカルーセル図

注：ブートストラップはjqueryに基づいて構築されているため、最初にJqueryを導入する必要があります


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JQuery轮播图</title>
    <script src="jquery-3.5.1.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
    <script src="./bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .foucs {
            width: 990px;
            height: 540px;
            margin: 200px auto;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="foucs">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="image/focus1.jpg" alt="...">
                    <div class="carousel-caption">

                    </div>
                </div>
                <div class="item">
                    <img src="./image/focus2.jpg" alt="...">
                    <div class="carousel-caption">

                    </div>
                </div>

                <div class="item">
                    <img src="./image/focus3.jpg" alt="...">
                    <div class="carousel-caption">

                    </div>
                </div>


            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <script>
        $('.carousel').carousel({
            interval: 1000
        })
    </script>
</body>

</html>

ここに画像の説明を挿入

ローカルストレージ

インターネットの急速な発展に伴い、Webベースのアプリケーションはますます一般的になり、同時にますます複雑になっています。さまざまなニーズを満たすために、大量のデータがローカルに保存されます。HTML5仕様関連するソリューションを提案します。プログラム。

ローカルストレージ機能

1.データはユーザーのブラウザに保存されます

2.セットアップと読み取りが簡単で、データを失うことなくページを更新することもできます

3.大容量、sessionStorageは約5M、localStorageは約20M

4.文字列のみを保存でき、JSON.stringify（）をエンコードした後にオブジェクトを保存できます。

window.sessionStorage

1.ライフサイクルはブラウザウィンドウを閉じることです

2.同じウィンドウ（ページ）でデータを共有できます

3.キーと値のペアの形式で保存して使用します

データの保存：

sessionStorage.setItem（key、value）

データを取得する

sessionStorage.getItem（key）

データの削除：

sessionStorage.removeItem（key）

クリアデータ:(すべてクリア）

sessionStorage.clear（）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地存储</title>
</head>

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">设置数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>

</body>
<script>
    // 获取元素
    var ipt = document.querySelector('input');
    var set = document.querySelector('.set');
    var get = document.querySelector('.get');
    var remove = document.querySelector('.remove');
    var del = document.querySelector('.del');


    // 存储数据
    set.addEventListener('click', function() {
        //当我们点击之后，就把表单里面的值存储起来
        var val = ipt.value;
        sessionStorage.setItem('uname', val);


    })

    //获取数据
    get.addEventListener('click', function() {
        console.log(sessionStorage.getItem('uname'))
    })

    // 删除数据
    remove.addEventListener('click', function() {
        console.log(sessionStorage.removeItem('uname'))
    })

    //清空数据
    del.addEventListener('click', function() {
        console.log(sessionStorage.clear())
    })
</script>

</html>

ここに画像の説明を挿入

window.localStorage

1.宣言期間は永続的に有効になり、手動で削除しない限り、閉じたページも存在します

2.複数のウィンドウ（ページ）を共有できます（同じブラウザを共有できます）

以键值对的形式存储使用

データの保存：

localStorage.setItem（key、value）

データの取得：

localStorage.getItem（key）

データの削除：

localStorage.removeItem（key）

クリアデータ:(すべてクリア）

localStorage.clear（）

ケース：ユーザー名を覚えておいてください

[ユーザー名を記憶する]をオンにすると、次にユーザーがブラウザーを開いたときに、最後にログインしたユーザー名がテキストボックスに自動的に表示されます。
ケーススタディ

把数据存起来，用到本地存储
关闭页面，也可以显示用户名，所以用到localStorage
打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
当复选框发生改变的时候change事件
如果勾选，就存储，否则就移除


<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <input type="text" id="username">
        <input type="checkbox" name="" id='remember' />记住用户名

        <script>
            //    获取事件源
            var username = document.querySelector("#username");
            var remember = document.querySelector("#remember");

            // 如果本地储存有uername 则赋值给input
            if (localStorage.getItem('username')) {
                username.value = localStorage.getItem('username');
                remember.checked = true;
            }
            
            remember.addEventListener('change',function(){
                if(this.checked) {
                    localStorage.setItem('username',username.value)
                }else {
                    localStorage.removeItem('username')
                }
            })
        </script>
    </body>

</html>

おすすめ

転載: blog.csdn.net/weixin_45419127/article/details/112238467
おすすめ
GitHub のホットリストに急上昇 — オープンソースのプログラミング言語とフレームワークは、どうしてこんなにも魅力的なのでしょうか?
北京ヒューマノイドロボットイノベーションセンターが、擬人化走行用の純粋な電気駆動を備えた世界初のフルサイズヒューマノイドロボット「Tiangong」を発売
ランキング
アリクラウドサーバ_ubuntu ECSシステムディスク拡張システム_
ボタンをクリックしてクリップボードにコピーします
脅威ハンティングを使用してサイバー セキュリティを強化する
ライン画像やコンテナnginxのの建設
Python での try の使用について書く
リアルタイムのデータウェアハウスを構築する方法高速データ時代、MySQLのAnalyticDBはあなたを教えて
Docker でのネットワークおよびデータ管理 (Docker Swarm クラスターおよび Docker データ管理を含む)
Java ループの比較: 従来の for ループ、拡張された for ループ、および forEach ループ
浙江大学版「C言語プログラミング（第3版）」演習2-18
Gestion du temps RTOS - Utilisation de la fonction de crochet SysTick pour réaliser l'échantillonnage de synchronisation et les sous-sections de ce chapitre
アーカイブ
もっと
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

コードワールド

© 2018 codetd.com