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

轮播图插件

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
源码下载：点击下载
链接：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" /><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="data:images/bg1.jpg" alt="" id="wows1_0"></li><li><img src="data:images/bg2.jpg" alt="" id="wows1_2"></li><li><img src="data:images/bg3.jpg" alt="" id="wows1_3"></li><li><img src="data:images/bg4.jpg" alt="" id="wows1_4"></li><li><img src="data:images/bg5.jpg" alt="" id="wows1_5"></li><li><img src="data:images/bg6.jpg" alt="" id="wows1_6"></li><li><img src="data:images/bg7.jpg" alt="" id="wows1_7"></li><li><img src="data: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进度条插件

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

api文档
简单使用

 <!-- 用来加载进度条 --><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>

* 实现加载效果如下

源码下载：点击下载

pace进度条有很多样式，具体可以查看演示

筛选过滤插件

简介
这是一个封装的jQuery插件，带有动画效果，具体可以查看
演示地址
源码下载
链接：https://pan.baidu.com/s/11ofYY5LG5kNuNh_j1YzUGA
提取码：zhhe
使用方法

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

总结

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

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

html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
微信小程序--轮播图
微信小程序轮播图的实现是利用了swiper组件(滑块视图容器). 主要参数如下: 属性名类型默认值说明 indicator-dots Boolean false 是否显示面板指示点 indica ...
五分钟掌握微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boole ...
微信小程序---轮播图
0. 微信小程序轮播图的实现 a. 是利用了swiper组件滑块视图容器 b. swiper的文档文档https://developers.weixin.qq.com/miniprogram/dev ...
微信小程序轮播图代码
微信小程序轮播图的代码如下: 首先,在小程序的 wxml 文件中,添加如下代码:  <swiper class="swiper" in ...
微信小程序轮播图高度与图片高度不匹配问题
微信小程序轮播图高度与图片高度不匹配问题在微信小程序项目中,为了美观给page设置了padding值,然后让轮播图里面的图片宽度为100%,高度widthFix自适应,出现了如下问题:指示器位置不对 ...
微信小程序轮播中的current_微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boolean ...
小程序轮播图实时更新
关于小程序轮播图实时更新不借助webSocket来实现,为你们提供以下思路博主就是这样搞得已经实现很好用 1. 关于轮播图后台肯定有维护页面也就是说和后端商量好,如果后台新增.修改.删除了某个轮播图 ...
小程序轮播图高度适配
小程序轮播图适配在开发小程序轮播图时,我遇到一下问题:小程序轮播图的导航栏总是不能放在正确的位置上,思考再三,我发现问题的原因是:当我们设置image的mode="widthFix&quo ...
ios中间大,两边小的轮播图
首先上图 , 中间大,两边小的轮播图 ,git地址 : https://github.com/guochaoshun/LunBoTu 主要参考代码 : https://github.com/orzzh ...

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