最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏
用到了许多有趣的东西们今天分享一下。
轮播图插件
Swiper轮播图插件
- Swiper 的结构和基础原理
Swiper 的每个展示块(屏)为一个slide,slide中放置图片或文字等展示的内容,全部slide排成一行(或多行)包含在包装器wrapper中,而总容器container 又包裹着wrapper和箭头按钮控件navigation以及分页器控件pagination。
具体可以查看:官方文档
以及 基础演示 - Swiper的简单使用
在做的网页中主要用到了swiper纵向轮播,来制造一个容器,使每一个轮播框都成为一个页面,而达到这样的效果:
引入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裂变轮播图
是一种很炫酷的轮播图,像是幻灯片。代码都是已经被封装好的。
主要用到了 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进度条插件
- 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" 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>
* 实现加载效果如下
筛选过滤插件
- 简介
这是一个封装的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> <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>
总结
最近做我个人简历大概花了三四天,很久都没有分享东西了,其实最近也遇到了许多有趣的东西,还有之前做的仿美团网的项目需要总结。还是很需要时间来做这些事情,但这中分享的确也是一种享受和喜欢做的事情,有兴趣的朋友可以下方留言交流哈。^ _ ^