最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏
用到了许多有趣的东西们今天分享一下。
轮播图插件
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="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进度条插件
- 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>
* 实现加载效果如下
筛选过滤插件
- 简介
这是一个封装的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>
总结
最近做我个人简历大概花了三四天,很久都没有分享东西了,其实最近也遇到了许多有趣的东西,还有之前做的仿美团网的项目需要总结。还是很需要时间来做这些事情,但这中分享的确也是一种享受和喜欢做的事情,有兴趣的朋友可以下方留言交流哈。^ _ ^