CSS

get几个小技能：轮播图插件、进度条插件、筛选过滤插件

Nick · 3月10日 · 2020年本文6397字 · 阅读16分钟903

最近参加了一个网页设计大赛，趁这个机会做了一个个人简历的网页：点击欣赏
用到了许多有趣的东西们今天分享一下。

轮播图插件

Swiper轮播图插件

  • Swiper 的结构和基础原理
    Swiper 的每个展示块（屏）为一个slide，slide中放置图片或文字等展示的内容，全部slide排成一行(或多行)包含在包装器wrapper中，而总容器container 又包裹着wrapper和箭头按钮控件navigation以及分页器控件pagination。
    具体可以查看：官方文档
    以及 基础演示
  • Swiper的简单使用
    在做的网页中主要用到了swiper纵向轮播，来制造一个容器，使每一个轮播框都成为一个页面，而达到这样的效果：
    get几个小技能：轮播图插件、进度条插件、筛选过滤插件-左眼会陪右眼哭の博客
    引入swiper.min.js和swiper.min.css两个文件，文件下载地址：
    或者引入CDN
    html
    <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="nofollow noopener" rel="nofollow noopener" rel="stylesheet">
    <script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
    简单的使用，代码如下：
 <!DOCTYPE html>
  <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="nofollow noopener"  rel="nofollow noopener"  rel="stylesheet">
    <script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .pace-running {
            overflow: hidden;
        }
        .pace-running::before {
            width: 100%;
            height: 100%;
            display: block;
            content: "";
            background: #eee;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 9999 !important;
        }
        /* 自定义子弹样式 */
        .my-bullet {
            display: block;
            width: 5px;
            height: 5px;
            border: 3px solid #ffffff;
            margin-top: 25px !important;
            background: #337ab7;
            border-radius: 50%;
            opacity: 1;
            cursor: pointer;
        }

        /* 子弹激活动画 */
        .my-bullet-active {
            animation: demo 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        }
        /* 激活动画效果 */
        @keyframes demo {
            0% {
                -webkit-box-shadow: 0 0 0 0 rgba(37, 143, 184, 1);
            }
           100% {
                -webkit-box-shadow: 0 0 0 10px rgba(37, 143, 184, 0);
            }
        }
    </style>
</head>
<body>
      <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide " style="background-color: lightcyan;">           
            </div>
            <div class="swiper-slide" style="background-color: lightgray;">Slide 2</div>
            <div class="swiper-slide" style="background-color: lightpink;">Slide 3</div>
            <div class="swiper-slide " style="background-color: lightcyan;">Slide 1</div>
            <div class="swiper-slide" style="background-color: lightgray;">Slide 2</div>
            <div class="swiper-slide" style="background-color: lightpink;">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
</body>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        // effect: 'fade', //切换效果
        mousewheel: true, //鼠标滚动切换
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            bulletClass: 'my-bullet',
            bulletActiveClass: 'my-bullet-active',
        },
        // autoplay: {
        //     delay: 1000, //1秒切换一次
        // },
    })
    //监听滚轮滚动事件
    // window.onmousewheel = document.onmousewheel = function () {
    //     alert('滚动了')
    // };
</script>
</html>

实现的效果就是上述的全屏页面轮播

wowslider裂变轮播图

是一种很炫酷的轮播图，像是幻灯片。代码都是已经被封装好的。
get几个小技能：轮播图插件、进度条插件、筛选过滤插件-左眼会陪右眼哭の博客
主要用到了 wowslider.css、wowslider.js、script.js、jquery.js
源码下载：点击下载
链接：https://pan.baidu.com/s/1I-Y7mKae0XL6vz6amABkGA
提取码：1zao
使用代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/wowslider.css" rel="nofollow noopener"  />
    <script type="text/javascript" src="./js/jquery.js"></script>

</head>
<!-- 根据wowslider的文档制作裂变的轮播图 -->
<style>
       * {
            margin: 0;
            padding: 0;
        }
    </style>
<body style="overflow: hidden; ">
    <div id="wowslider-container1">
        <div class="ws_images">
            <ul>
                <li><img src="images/bg1.jpg" alt="" id="wows1_0"></li>
                <li><img src="images/bg2.jpg" alt="" id="wows1_2"></li>
                <li><img src="images/bg3.jpg" alt="" id="wows1_3"></li>
                <li><img src="images/bg4.jpg" alt="" id="wows1_4"></li>
                <li><img src="images/bg5.jpg" alt="" id="wows1_5"></li>
                <li><img src="images/bg6.jpg" alt="" id="wows1_6"></li>
                <li><img src="images/bg7.jpg" alt="" id="wows1_7"></li>
                <li><img src="images/bg8.jpg" alt="" id="wows1_8"></li>
            </ul>
        </div>
        <!-- 轮播图子弹 -->
        <div class="ws_bullets clearfix">
            <div>
                <a href="javascript:;" rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  id="wows1_0"></a>
                <a href="javascript:;" rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  id="wows1_2"></a>
                <a href="javascript:;" rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  id="wows1_3"></a>
                <a href="javascript:;" rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  id="wows1_4"></a>
                <a href="javascript:;" rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  id="wows1_5"></a>
                <a href="javascript:;" rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  id="wows1_6"></a>
                <a href="javascript:;" rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  id="wows1_7"></a>
                <a href="javascript:;" rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  rel="nofollow noopener"  id="wows1_8"></a>
            </div>
        </div>

    </div>
    <script type="text/javascript" src="js/wowslider.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</body>

pace进度条插件

  1. pace进度条插件简介
        Pace将自动监视您的Ajax请求，事件循环滞后，文档就绪状态以及页面上的元素，以决定进度。在ajax导航上，它将再次开始！
    Pace是全自动的，无需进行配置即可上手。
        如果您想进行一些调整，请按以下步骤操作：您可以window.paceOptions在导入文件之前进行设置：
  2. 如何使用

* api文档
* 简单使用

 <!-- 用来加载进度条 -->
    <script data-pace-options='{ "ajax": false }' src='js/pace.js'></script>
    <!-- 引入进度条样式文件 -->
    <link rel="stylesheet" href="css/corner.css" rel="nofollow noopener" >
  <style>
        * {
            margin: 0;
            padding: 0;
        }

        .pace-running {
            overflow: hidden;
        }

        .pace-running::before {
            width: 100%;
            height: 100%;
            display: block;
            content: "";
            background: #eee;
        }
    </style>

* 实现加载效果如下

在这里插入图片描述

筛选过滤插件

  1. 简介
    这是一个封装的jQuery插件，带有动画效果，具体可以查看
    演示地址
  2. 源码下载
    链接：https://pan.baidu.com/s/11ofYY5LG5kNuNh_j1YzUGA
    提取码：zhhe
  3. 使用方法
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="utf-8">
    <title>jQuery筛选过滤插件Filterizr演示-单选</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }

        .nav {
            width: 1000px;
            margin: 0 auto 20px;
            text-align: center;
            font-size: 0;
        }

        .nav li {
            display: inline-block;
            margin: 0 5px;
            padding: 10px 20px;
            font-size: 14px;
            color: #333;
            background-color: #ccc;
            cursor: pointer;
        }

        .nav .active {
            color: #fff;
            background-color: #21b384;
        }

        .jq22 {
            width: 1000px;
            margin: 0 auto;
            font-size: 0;
        }

        .filtr-item {
            display: inline-block;
            width: 230px;
            padding: 10px;
        }

        .filtr-item img {
            width: 100%;
        }
    </style>
</head>
<body>
    <h2>单选</h2>

    <ul class="nav">
        <li class="active" data-filter="all">全部</li>
        <li data-filter="1">城市</li>
        <li data-filter="2">自然</li>
        <li data-filter="3">工业</li>
        <li data-filter="4">白昼</li>
        <li data-filter="5">夜景</li>
    </ul>

    <div class="jq22">
        <div class="filtr-item" data-category="1, 5">
            <img src="img/a1.png" alt="">
        </div>
        <div class="filtr-item" data-category="2, 5">
            <img src="img/a2.png" alt="">
        </div>
        <div class="filtr-item" data-category="1, 4">
            <img src="img/a3.png" alt="">
        </div>
        <div class="filtr-item" data-category="3">
            <img src="img/a4.png" alt="">
        </div>
        <div class="filtr-item" data-category="3, 4">
            <img src="img/a5.png" alt="">
        </div>
        <div class="filtr-item" data-category="2, 4">
            <img src="img/a6.png" alt="">
        </div>
        <div class="filtr-item" data-category="1, 5">
            <img src="img/a7.png" alt="">
        </div>
        <div class="filtr-item" data-category="2, 4">
            <img src="img/a8.png" alt="">
        </div>
        <div class="filtr-item abc" data-category="3">
            <img src="img/a9.png" alt="">
        </div>
    </div>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/jquery.filterizr.js"></script>
    <script>
        $(function () {
            $('.jq22').filterizr();

            $('.nav li').on('click', function () {
                $(this).toggleClass('active').siblings().removeClass('active');
            });
        });
    </script>
</body>
</html>

总结

    最近做我个人简历大概花了三四天，很久都没有分享东西了，其实最近也遇到了许多有趣的东西，还有之前做的仿美团网的项目需要总结。还是很需要时间来做这些事情，但这中分享的确也是一种享受和喜欢做的事情，有兴趣的朋友可以下方留言交流哈。^ _ ^

相关文章

几个js实用代码——动态加载时间、滚动条优化、两个数组转化为map对象等

1月3日 · 2021年

js事件高级：拖拽

1月27日 · 2020年

完美运动框架（新浪微博小案例）

1月27日 · 2020年

js animate动画基础

1月27日 · 2020年
0 条回应
©2021版权所有
在线人数：1人 来访统计
隐藏