一、IScroll基本使用
-
什么是iScroll?
iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。
iScroll不仅仅是滚动。在你的项目中包含仅仅4kb大小的iScroll,能让你的项目便拥有滚动,缩放,平移,无限滚动,视差滚动,旋转功能 -
iScroll基本使用
2.1按照iScroll的规定搭建HTML结构
2.2引入iScroll
2.3创建iScroll对象, 告诉它谁需要滚动 -
iScroll的版本
针对iScroll的优化。为了达到更高的性能,iScroll分为了多个版本。你可以选择最适合你的版本。
3.1 iscroll.js,这个版本是常规应用的脚本。它包含大多数常用的功能,有很高的性能和很小的体积。
3.2 iscroll-lite.js,精简版本。它不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。
3.3 iscroll-probe.js,探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。
3.4 iscroll-zoom.js,在标准滚动功能上增加缩放功能。
3.5 iscroll-infinite.js,可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。
用法:
1.中文网址: http://caibaojian.com/iscroll-5/
文件来源:
2. 在gitHub官网中搜索,iscroll 选择第一个文件,并下载;
在HTML中导入iscroll.js, 文件,在script 标签里创建 new IScroll ;
iscroll.js,所在路径:iscroll-master\iscroll-master\build
let myScroll = new IScroll('.box'); // 括号里的为所需操作的元素, .Box 为它的类名;
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03-iScroll高级使用</title>
<style>
*{
margin: 0;
padding: 0;
touch-action: none;
}
div{
width: 50%;
height: 300px;
border: 1px solid #000;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
dl>dt{
line-height: 30px;
text-align: center;
border-bottom: 1px solid #000;
}
.iScrollVerticalScrollbar{ // 自定义的滚动条样式
width: 30px;
height: 100%;
background: deepskyblue;
position: absolute;
top: 0;
right: 0;
z-index: 999;
}
.iScrollIndicator{ // 自定义的滚动条中的指示器样式
width: 100%;
background: pink;
}
</style>
<script src="js/iscroll.js"></script>
</head>
<body>
<div class="box">
<dl>
<dt>我是标题1</dt>
<dt>我是标题2</dt>
<dt>我是标题3</dt>
<dt>我是标题4</dt>
<dt>我是标题5</dt>
<dt>我是标题6</dt>
<dt>我是标题7</dt>
<dt>我是标题8</dt>
<dt>我是标题9</dt>
<dt>我是标题10</dt>
<dt>我是标题11</dt>
<dt>我是标题12</dt>
</dl>
</div>
<script>
let myScroll = new IScroll('.box', {
mouseWheel: true, // 滚轮滚动
// scrollbars: true // 滚动条显示
scrollbars: 'custom' //自定义滚动条的显示样式
});
myScroll.on("beforeScrollStart", function () {
console.log("滚动之前");
});
myScroll.on("scrollStart", function () {
console.log("开始滚动");
});
/*myScroll.on("scroll", function () {
console.log("正在滚动");
});*/
myScroll.on("scrollEnd", function () {
console.log("滚动结束");
});
</script>
</body>
二、什么是swiper?
-
Swiper是纯javascript打造的滑动特效插件,面向PC、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择。 -
如何使用:
2.1引入swiper对应的 css 和 js 文件
2.2按照框架的需求搭建三层结构
2.3创建一个Swiper对象, 将容器元素传递给它
官网:https://www.swiper.com.cn/
使用:官网里点击 “中文教程”——Swiper4.x
1.导入所需文件:swiper-4.5.0\swiper-4.5.0\dist 路径中的 swiper.css和 swiper.js文件;
<head>
<meta charset="UTF-8">
<title>02-swiper基本使用</title>
<link rel="stylesheet" href="css/swiper.css">
<script src="js/swiper.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.swiper-container{
width: 400px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
}
.swiper-container>ul{
list-style: none;
}
</style>
</head>
<body>
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">Slide 1</li>
<li class="swiper-slide">Slide 2</li>
<li class="swiper-slide">Slide 3</li>
</ul>
</div>
<script>
let mySwiper = new Swiper ('.swiper-container');
</script>
</body>
三、swiper高级使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-swiper高级使用</title>
<link rel="stylesheet" href="css/swiper.css">
<script src="js/swiper.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.swiper-container{
width: 400px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
}
.swiper-container>ul{
list-style: none;
}
.swiper-pagination-bullet{
background: red;
}
.swiper-button-next{
background: red;
}
</style>
</head>
<body>
<div class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide">Slide 1</li>
<li class="swiper-slide">Slide 2</li>
<li class="swiper-slide">Slide 3</li>
</ul>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
let mySwiper = new Swiper ('.swiper-container', {
// 这里的格式值得注意
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true, // 循环模式选项
// autoplay:true, // 自动轮播
// autoplay: {
// delay: 1000,//1秒切换一次
// },
speed:5000, //设置切换速度
});
</script>
</body>
</html>
四、动画示例
- 使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。
- 下载:https://www.swiper.com.cn/usage/animate/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-swiper-animation</title>
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="css/swiper.animate.min.css">
<script src="js/swiper.js"></script>
<script src="js/swiper.animate1.0.3.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
p{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: #f00;
margin: 0 auto;
}
@keyframes myFadeIn {
0% {
opacity: 0;
transform: scale(2);
}
100% {
opacity: 1;
transform: scale(0.5);
}
}
.myFadeIn {
-webkit-animation-name: myFadeIn;
animation-name: myFadeIn
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!--
swiper-animate-effect:切换效果,例如 fadeInUp
swiper-animate-duration:可选,动画持续时间(单位秒),例如 0.5s
swiper-animate-delay:可选,动画延迟时间(单位秒),例如 0.3s
-->
<p class="ani" swiper-animate-effect="myFadeIn">内容</p>
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<script>
// 这里的格式值得注意
var mySwiper = new Swiper ('.swiper-container', {
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
}
}
});
</script>
</body>
</html>
-End