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

不愿意做鱼的小鲸鱼
378 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。 最近参加了一个网页设计大赛，趁这个机会做了一个个人简历的网页：点击欣赏
用到了许多有趣的东西们今天分享一下。

轮播图插件

Swiper轮播图插件

  • Swiper 的结构和基础原理
    Swiper 的每个展示块（屏）为一个slide，slide中放置图片或文字等展示的内容，全部slide排成一行(或多行)包含在包装器wrapper中，而总容器container 又包裹着wrapper和箭头按钮控件navigation以及分页器控件pagination。
    具体可以查看：官方文档
    以及 基础演示

  • Swiper的简单使用
    在做的网页中主要用到了swiper纵向轮播，来制造一个容器，使每一个轮播框都成为一个页面，而达到这样的效果：
    在这里插入图片描述
    引入swiper.min.js和swiper.min.css两个文件，文件下载地址：
    或者引入CDN

    <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" 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="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裂变轮播图

是一种很炫酷的轮播图，像是幻灯片。代码都是已经被封装好的。
在这里插入图片描述
主要用到了 wowslider.css、wowslider.js、script.js、jquery.js
源码下载：点击下载
链接：pan.baidu.com/s/1I-Y7mKae…
提取码：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" />
    <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:;" id="wows1_0"></a>
                <a href="javascript:;" id="wows1_2"></a>
                <a href="javascript:;" id="wows1_3"></a>
                <a href="javascript:;" id="wows1_4"></a>
                <a href="javascript:;" id="wows1_5"></a>
                <a href="javascript:;" id="wows1_6"></a>
                <a href="javascript:;" id="wows1_7"></a>
                <a href="javascript:;" 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. 如何使用
 <!-- 用来加载进度条 -->
    <script data-pace-options='{ "ajax": false }' src='js/pace.js'></script>
    <!-- 引入进度条样式文件 -->
    <link rel="stylesheet" href="css/corner.css">
  <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. 源码下载
    链接：pan.baidu.com/s/11ofYY5LG…
    提取码：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>
<h1>单选</h1>

<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>

总结

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

avatar
文章
阅读
粉丝