js插件之iscroll,swiper0814

作者: 煤球快到碗里来 | 来源:发表于2019-08-14 18:33 被阅读0次

js插件之iscroll,swiper

1.iscroll

1.1我们在电商网站移动端经常会看见有侧边栏,如下图

侧边栏.png

我们先用原生js来实现一下这个功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-侧边栏菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 85px;
            height: 100%;
            border: 1px solid #000;
        }
        .box>ul{
            list-style: none;
            width: 100%;
            position: relative;
        }
        .box>ul>li{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: 1px solid #666;
        }
        .box>ul>li:last-child{
            border-bottom: none;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>热门推荐</li>
        <li>指趣学院</li>
        <li>手机数码</li>
        <li>家用电脑</li>
        <li>电脑办公</li>
        <li>计生情趣</li>
        <li>美妆护肤</li>
        <li>个护清洁</li>
        <li>汽车用品</li>
        <li>京东超市</li>
        <li>男装</li>
        <li>男鞋</li>
        <li>女装</li>
        <li>女鞋</li>
        <li>母婴童装</li>
        <li>图书音像</li>
        <li>运动户外</li>
        <li>内衣配饰</li>
        <li>食品生鲜</li>
        <li>酒水饮料</li>
        <li>家具家装</li>
        <li>箱包手袋</li>
        <li>钟表珠宝</li>
        <li>玩具乐器</li>
        <li>医疗保健</li>
        <li>宠物生活</li>
    </ul>
</div>
<script>
    // 1.拿到需要操作的元素
    let oDiv = document.querySelector("div");
    let oUl = document.querySelector("ul");
    let startY = 0;
    let offsetY = 0;
    let currentY = 0;
    let maxOffsetY = 0;
    let minOffsetY = oDiv.offsetHeight - oUl.offsetHeight;
    // 2.监听手指按下和移动的事件
    oDiv.ontouchstart = function (event) {
        // 保存手指按下的位置
        startY = event.targetTouches[0].clientY;
    }
    oDiv.ontouchmove = function (event) {
        // 拿到手指移动之后的位置
        let moveY = event.targetTouches[0].clientY;
        // 计算手指移动的偏移位
        offsetY = moveY - startY;
        // 判断有没有超出极限值
        if((currentY + offsetY) >= (maxOffsetY + 100)){
            return;
        }else if((currentY + offsetY) <= (minOffsetY - 100)){
            return;
        }
        // 让UL移动
        oUl.style.top = currentY + offsetY + "px";
    }
    oDiv.ontouchend = function (event) {
        // 保存已经移动出去的偏移位
        currentY += offsetY;
        // 判断有没有超出顶部的范围
        if(currentY > maxOffsetY){
            // console.log("超出范围了");
            currentY = maxOffsetY;
            oUl.style.top = maxOffsetY + "px";
        }
        // 判断有没有超出底部的范围
        else if(currentY < minOffsetY){
            // console.log("超出范围了");
            currentY = minOffsetY;
            oUl.style.top = minOffsetY + "px";
        }
    }
</script>
</body>
</html>

1.2 我们来引出iscroll

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-iScroll基本使用</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        div{
            width: 100%;
            height: 300px;
            border: 1px solid #000;
            box-sizing: border-box;
            overflow: hidden;
        }
        dl>dt{
            line-height: 30px;
            text-align: center;
            border-bottom: 1px solid #000;
        }
    </style>
    <script src="js/iscroll.js"></script>
</head>
<body>
<div class="box">
    <dl>
        <dt>我是标题1</dt>
        <dt>我是标题29</dt>
        <dt>我是标题30</dt>
    </dl>
</div>
<script>
    /*
    1.什么是iScroll?
    iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。
    iScroll不仅仅是滚动。在你的项目中包含仅仅4kb大小的iScroll，能让你的项目便拥有滚动，缩放，平移，无限滚动，视差滚动，旋转功能

    2.iScroll基本使用
    2.1按照iScroll的规定搭建HTML结构(如上三级结构)
    2.2引入iScroll
    2.3创建iScroll对象, 告诉它谁需要滚动(如下让box中内容滚动)

    3.iScroll的版本
    针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。你可以选择最适合你的版本。
    3.1iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。
    3.2iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。
    3.3iscroll-probe.js，探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。（我正在做更多的测试,这可能最终在常规iscroll.js脚本，请留意）。
    3.4iscroll-zoom.js，在标准滚动功能上增加缩放功能。
    3.5iscroll-infinite.js，可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。
    * */
    let myScroll = new IScroll('.box');
</script>
</body>
</html>

1.3 其他用法

<!DOCTYPE html>
<html lang="en">
<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>
    </dl>
</div>
<script>
    let myScroll = new IScroll('.box', {
        mouseWheel: true,
        scrollbars: true
        //scrollbars: 'custom'
        //scrollbars为true时滚动条时默认的状态,为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>
</html>

1.4 改造侧边导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-侧边栏菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .box{
            width: 85px;
            height: 100%;
            border: 1px solid #000;
        }
        .box>ul{
            list-style: none;
            width: 100%;
            position: relative;
        }
        .box>ul>li{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: 1px solid #666;
        }
        .box>ul>li:last-child{
            border-bottom: none;
        }
    </style>
    <script src="js/iscroll.js"></script>

</head>
<body>
<div class="box">
    <ul>
        <li>热门推荐</li>
        <li>指趣学院</li>
        <li>手机数码</li>
        <li>家用电脑</li>
        <li>电脑办公</li>
        <li>计生情趣</li>
        <li>美妆护肤</li>
        <li>个护清洁</li>
        <li>汽车用品</li>
        <li>京东超市</li>
        <li>男装</li>
        <li>男鞋</li>
        <li>女装</li>
        <li>女鞋</li>
        <li>母婴童装</li>
        <li>图书音像</li>
        <li>运动户外</li>
        <li>内衣配饰</li>
        <li>食品生鲜</li>
    </ul>
</div>
<script>
    //就是这么简单
    new IScroll(".box");
</script>
</body>
</html>

这些工具只能用一点学一点了

2.swiper

2.1 使用做一个最复杂的轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-移动端轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        div{
            width: 100%;
            position: relative;
            overflow: hidden;
        }
        ul{
            list-style: none;
            width: 500%;
            display: flex;
            justify-content: flex-start;
            position: relative;
            left: 0;
            top: 0;
        }
        ul>li{
            flex: 1;
        }
        ul>li>img{
            width: 100%;
            vertical-align: bottom;
        }
        div>p{
            width: 100%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            /*background: deepskyblue;*/
            /*
            告诉浏览器当前元素不需要接收事件
            注意点: 如果父元素不接收事件, 那么默认子元素也不能接收事件
                    如果子元素需要接收事件, 那么必须单独设置为auto
            */
            pointer-events: none;
        }
        div>p>span{
            display: inline-block;
            width: 30px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            color: #fff;
            background: rgba(0,0,0,0.3);
            pointer-events: auto;
        }
        ol{
            list-style: none;
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translateX(-50%);
            display: flex;
            justify-content: flex-start;
        }
        ol>li{
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            margin: 0 5px;
        }
        ol>.active{
            background: #f40;
        }
    </style>
    <script src="js/zepto.js"></script>
    <script src="js/selector.js"></script>
    <script src="js/event.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/fx.js"></script>
</head>
<body>
<div>
    <ul>
        <li><img src="images/img1.jpg" alt=""></li>
        <li><img src="images/img2.jpg" alt=""></li>
        <li><img src="images/img3.jpg" alt=""></li>
        <li><img src="images/img4.jpg" alt=""></li>
        <li><img src="images/img1.jpg" alt=""></li>
    </ul>
    <p>
        <span class="left-btn">&lt;</span>
        <span class="right-btn">&gt;</span>
    </p>
    <ol>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>
<script>
    ;(function($){
        $.extend($.fn, {
            stop: function(){
                this.css({transition: "none"});
                return this
            },
            //判断有没有动画在执行
            isAnimation: function(){
                let time = $("ul").css("transition-duration");
                time = parseFloat(time);
                return time !== 0;
            }
        })
    })(Zepto)
</script>
<script>
    // 1.定义变量保存对当前的索引
    let currentIndex = 0;
    // 2.定义变量保存图片宽度
    let itemWidth = $("ul>li").width();
    // 3.定义变量保存最大的索引
    let maxIndex = $("ul>li").length - 1;
    // 4.监听按钮点击
    $(".left-btn").click(function () {
        clearInterval(timerId);
        if($(this).isAnimation()){return}
        currentIndex--;
        if(currentIndex < 0){
            $("ul").css({left: -maxIndex * itemWidth});
            currentIndex = maxIndex - 1;
        }
        $("ul").animate({left: -currentIndex * itemWidth}, 500, function () {
            autoPlay();
        });
        $("ol>li").eq(currentIndex).addClass("active").siblings().removeClass();
    });
    $(".right-btn").click(function () {
        clearInterval(timerId);
        if($(this).isAnimation()){return}
        currentIndex++;
        if(currentIndex > maxIndex){
            $("ul").css({left: 0});
            currentIndex = 1;
        }
        $("ul").animate({left: -currentIndex * itemWidth}, 500, function () {
            autoPlay();
        });
        let index = currentIndex === 4 ? 0 : currentIndex;
        $("ol>li").eq(index).addClass("active").siblings().removeClass();
    });
    /*
    注意点:
    在移动端中是没有移入和移出事件的
    * */
    /*
    let oUl = document.querySelector("ul");
    oUl.onmouseenter = function () {
        console.log("移入");
    }
    oUl.onmouseleave = function () {
        console.log("移出");
    }
    */
    // 5.实现自动轮播
    let timerId = null;
    function autoPlay() {
        timerId = setInterval(function () {
            $(".right-btn").click();
        }, 2000);
    }
    autoPlay();
    $("ul").get(0).ontouchstart = function () {
        clearInterval(timerId);
    }
    $("ul").get(0).ontouchend = function () {
        autoPlay();
    }
    // 6.实现轻扫切换
    $("ul").swipeLeft(function () {
        $(".right-btn").click();
    });
    $("ul").swipeRight(function () {
        $(".left-btn").click();
    });
</script>
</body>
</html>

2.2 来引出swiper

<!DOCTYPE html>
<html lang="en">
<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>
    /*
     1.什么是swiper?
     Swiper是纯javascript打造的滑动特效插件，面向PC、平板电脑等移动终端。
     Swiper能实现触屏焦点图、触屏Tab切换等常用效果。
     Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
     
     2.如何使用:
     2.1引入swiper对应的css和js文件
     2.2按照框架的需求搭建三层结构
     2.3创建一个Swiper对象, 将容器元素传递给它
      */
    let mySwiper = new Swiper ('.swiper-container');
</script>
</body>
</html>

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

2.4 来改造一下我们的轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-移动端轮播图</title>
    <link rel="stylesheet" href="css/swiper.css">
    <script src="js/swiper.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            touch-action: none;
        }
        div{
            width: 100%;
        }
        ul{
            list-style: none;
        }
        ul>li>img{
            width: 100%;
            vertical-align: bottom;
        }
        .my-bullet{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            margin: 0 5px;
        }
        .my-bullet-active{
            background: #f40;
            opacity: 1;
        }
        
    </style>
</head>
<body>
<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide"><img src="images/img1.jpg" alt=""></li>
        <li class="swiper-slide"><img src="images/img2.jpg" alt=""></li>
        <li class="swiper-slide"><img src="images/img3.jpg" alt=""></li>
        <li class="swiper-slide"><img src="images/img4.jpg" alt=""></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',
            bulletClass : 'my-bullet',
            bulletActiveClass: 'my-bullet-active',
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true, // 循环模式选项
        autoplay: {
            delay: 2000,
        },
    });
</script>
</body>
</html>

2.5 swiper-animation

<!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,可以自定义动画效果,如上边我们自定义的myfadein
            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>
    //引入swiper.animate.min.css
    //swiper.animate1.0.3.min.js
    var mySwiper = new Swiper ('.swiper-container', {
        on:{
            init: function(){
                swiperAnimateCache(this); //隐藏动画元素 
                swiperAnimate(this); //初始化完成开始动画
            },
            slideChangeTransitionEnd: function(){
                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
            }
        }
    });
</script>
</body>
</html>

js插件之iscroll,swiper0814

js插件之iscroll,swiper

1.iscroll

1.2 我们来引出iscroll

1.3 其他用法

1.4 改造侧边导航栏

2.swiper

2.1 使用做一个最复杂的轮播图

2.2 来引出swiper

2.3 Swiper另一些常用的功能

2.4 来改造一下我们的轮播图

2.5 swiper-animation

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读