webapi_3 今天真真真全是大经典案例

这个项目一多起来了，还是分个序号比价好一点，你好我好大家好，然后关于这个标点符号的问题，我打字真的很不喜欢打标点符号，不是不好按，按个逗号其实也是顺便的事情，可能就是养成习惯了，就喜欢按个空格来分开，也不晓得你们看有标点和没得标点看起来有区别没得，如果有区别的话我就慢慢养成习惯打上标点吧！！！欧尔整点感叹号这些还是可以，我们今天书接上回由于是大项目所以用了另一种呈现的方法。

我们后这个章节后面的内容的项目基本都要以一个自己编写的缓冲动画的函数为基础，所以我先把这个函数贴上来

缓冲动画函数终极版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: absolute;
            top: 50px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button>500</button>
    <button>800</button>
    <script>
        var box = document.querySelector('div')
        var btns = document.querySelectorAll('button')
        function animate(obj, target, callback) {
            clearInterval(obj.timer)
            obj.timer = setInterval(function() {
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer)
                    // callback必须写到结束定时器这里
                    if (callback) {
                        callback()
                    }
                }
                var step = (target - obj.offsetLeft) / 10
                step = step < 0 ? Math.floor(step) : Math.ceil(step)
                obj.style.left = obj.offsetLeft + step + 'px'
            }, 15)
        }
        btns[0].onclick = function() {
            animate(box, 500)
        }
        btns[1].onclick = function() {
            animate(box, 800, function() {
                box.style.backgroundColor = 'red'
            })
        }
    </script>
</body>
</html>

来了一个十分十分经典的案例，轮播图，纯手打还是要点逻辑的

我后面给她直接单领出来单独放在了一个html里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ol,
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .banner {
            position: relative;
            width: 721px;
            height: 455px;
            margin: 100px auto;
            overflow: hidden;
        }
        .banner >a {
            display: none;
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: rgba(0, 25, 0, .5);
            font-size: 20px;
            color: white;
            text-align: center;
            line-height: 40px;
            z-index: 1;
            cursor: pointer;
        }
        .banner a:nth-child(2) {
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }
        .banner a:nth-child(1) {
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        .banner ol {
            position: absolute;
            bottom: 30px;
            left: 40px;
            color: white;
        }
        ol li {
            float: left;
            width: 8px;
            height: 8px;
            margin-left: 5px;
            border: 2px solid white;
            border-radius: 50%;
            cursor: pointer;
        }
        .current {
            background-color: #fff;
        }
        ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 500%;
        }
        ul li {
            float: left;
        }
    </style>
    <script src="./js/animate.js"></script>
    <script src="./js/test.js"></script>
</head>
<body>
    <div class="banner">
        <a href="javascript:;" class="arrow_r">&lt;</a>
        <a href="javascript:;" class="arrow_l">&gt;</a>
        <ul>
            <li><a href="javascript:;"><img src="./upload/focus.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./upload/focus1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./upload/focus2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="./upload/focus3.jpg" alt=""></a></li>
        </ul>
        <ol>
 
        </ol>
    </div>
</body>
</html>

然后最最重要的是他的js部分，非常值得回味，每一步我都写出了我的想法以及逻辑

window.addEventListener('load', function() {
    // 1.先完成移入轮播图显示隐藏点击按钮
    var banner = document.querySelector('.banner');
    var arrR = banner.querySelector('.arrow_l');
    var arrL = banner.querySelector('.arrow_r');
 
    banner.addEventListener('mouseenter', function() {
        arrL.style.display = 'block';
        arrR.style.display = 'block';
        // 7.1鼠标移入应该暂停轮播图 即停止定时器
        clearInterval(timer);
    });
    banner.addEventListener('mouseleave', function() {
        arrL.style.display = 'none';
        arrR.style.display = 'none';
        // 7.2移出继续计时器
        timer = setInterval(function() {
            arrR.click();
        },2000)
    });
    // 2.动态生成小圆圈 利用ul里面li的个数
    var ul = banner.querySelector('ul');
    var ol = banner.querySelector('ol');
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('data-index', i);
        // 2.2小圆排他思想 点击一个 其他为cuuret类 其他清空
        // 2.3点击小圆滚动图片需要自定义data-index left值为date-index * width
        li.addEventListener('click', function() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('data-index');
            // 5.一个bug 点击右键或者点击小圆后 再点击小圆或者右键 会乱跳 是因为此时 num与circle没有任何关联 点击一个后 再点击另一个事件 就会按他的num或者circle走
            // 此时需要将两个值都给到index给她赋值 就会有关联了
            num = index;
            circle = index;
            animate(ul, -index * banner.offsetWidth);
        })
        ol.appendChild(li);
 
    }
    // 2.1创建好后给第一个小圆添加默认current类
    ol.firstElementChild.className = 'current';
    // 3.2因为我们直接动html代码 会导致小原点也增加一个 所以要在小圆点获取ul li个数后面 动态克隆一个到ul最后面
    ul.appendChild(ul.firstElementChild.cloneNode(true));
    // 3.点击右边按钮一次就滚动一次 开始点击按钮事件
    // 首先要明确ul的移动距离等于 当前点击的第几次 * width
    var num = 0;
    var circle = 0;
    // 8.点击时还是有bug 点击过快会切换的很快 通过节流阀来完成一个函数再来回调解决
    var flag = true;
    arrR.addEventListener('click', function() {
        // 8.1如果flag为true才执行 一进去先给flag为false 如果没完成这个函数永远是flase 用户点击就没的作用
        if (flag) {
            flag = false;
            // 3.1当走到最后一张时当前 ul显示几个li就复制几个li到最后面（html代码）然后判断num是否等于4 如果是将num赋值为0 同时迅速将ul left为0
        if (num == ul.children.length - 1) {
            num = 0;
            ul.style.left = 0;
        };
        // 点一次就要加一次
        num++;
        // 8.2通过回调函数 完成了这个切换才能为true
        animate(ul, -num * banner.offsetWidth,function() {
            flag = true;
        });
        // 4.点击右侧按钮小圆跟着动 需要一个变量circle 点一次增加一次 获取ol li 下标就为circle
        circle++;
        // 4.1判断circle是否为最后一张 第四张 如果是就赋值为0、
        if (circle == ol.children.length) {
            circle = 0;
        }
        for (var i = 0; i < ol.children.length;i++) {
            ol.children[i].className = '';
        };
        ol.children[circle].className = 'current';
        }
    });
    // 6.左侧按钮点击
    arrL.addEventListener('click', function() {
        if (flag) {
            flag = false;
            // 6.2此时应该判断num是否为第一张也就是0 如果是num就为最后一张4 且left为4*width
        if (num == 0) {
            num = ul.children.length -1;
            ul.style.left = num * banner.offsetWidth;
        };
        // 6.1先修改为--
        num--;
        animate(ul, -num * banner.offsetWidth, function() {
            flag = true;
        });
        // 6.3circle也要为--
        circle--;
        // 6.4此时应该判断circle是否小于0 如果是就重新赋值为3
        if (circle < 0) {
            circle = ol.children.length - 1;
        }
        for (var i = 0; i < ol.children.length;i++) {
            ol.children[i].className = '';
        };
        ol.children[circle].className = 'current';
        }
    });
    // 7.自动播放功能利用定时器 还有手动调用事件
    var timer = setInterval(function() {
        arrR.click();
    },2000)
})

趁热打铁，我们马上再来一个移动端的轮播图，跟pc端还是有点差距的，它是通过transform来实现的

html部分很简单

<div class="focus">
        <ul>
            <li><img src="upload/focus3.jpg" alt=""></li>
            <li><img src="upload/focus1.jpg" alt=""></li>
            <li><img src="upload/focus2.jpg" alt=""></li>
            <li><img src="upload/focus3.jpg" alt=""></li>
            <li><img src="upload/focus1.jpg" alt=""></li>
        </ul>
        <!-- 小圆点 -->
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>
    </div>

js部分逻辑性我觉得没做熟练之前是比pc难的，做熟练过后其实还是可以的，三下五除二就搞完了

window.addEventListener('load', function() {
    // 1.自动轮播功能
    // 定义一个变量num 第一张为0 移动端的切换由translate实现
    var focus = document.querySelector('.focus');
    var ul = focus.querySelector('ul');
    var num = 0;
    var imgWidth = focus.offsetWidth;
    var timer =  setInterval(function() {
        num++;
        var translateX = -num * imgWidth;
        ul.style.transition = 'transform .3s';
        ul.style.transform = 'translateX('+translateX+'px)';
    }, 2000)
    // 2.无缝切换 移动端无缝切换 有一个新的事件 transitionend 通过这个事件判断num 来做到无缝切换
    ul.addEventListener('transitionend',function() {
        if (num >= 3) {
            num = 0;
            var translateX = -num * imgWidth;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX('+translateX+'px)';
            // 5.2往右边滑num--小于0了 要起到无缝切换效果还要在此进行一个判断
        } else if (num < 0 ) {
            num = 2;
            var translateX = -num * imgWidth;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX('+translateX+'px)';
        }
        // 3.小圆点跟着图走 用到新属性 classlist 可以添加类名删除类名
        // 配合queryselector使用 可以快速把当前带有该class名的去除
        focus.lastElementChild.querySelector('.current').classList.remove('current');
        focus.lastElementChild.children[num].classList.add('current');
    });
    // 4.手指拖动轮播图 手指按下的时候获得按下的坐标值 移动的时候不断地用移动的坐标值减去按下的坐标值 盒子的位置 = 盒子的原始位置+移动的位置
    var x = 0;
    focus.addEventListener('touchstart', function(e) {
        x = e.targetTouches[0].pageX;
        clearInterval(timer);
    });
    var moveX = 0;
    // 8.如果只是手指触摸没有移动 就不用进行touchend的判断
    var flag = false;
    focus.addEventListener('touchmove', function(e) {
        moveX = e.targetTouches[0].pageX - x;
        var box = -num * imgWidth + moveX;
        ul.style.transition  = 'none';
        ul.style.transform = 'translateX('+box+'px)';
        flag = true;
        // 7.清楚滑动的默认行为
        e.preventDefault();
    });
 
    // 5.要完成图片切换上下一张的效果 需要在事件手指离开屏幕中进行 判断移动距离的绝对值是否大于五十 如果是 就说明是要进行切换 并在里面再次判断真正移动距离是否为正数
    // 为正数就切换到上一张 为负数就切换到下一章
    focus.addEventListener('touchend', function(e) {
        if (flag) {
            if (Math.abs(moveX) > 50) {
                if (moveX > 0 ) {
                    num--;
                } else {
                    num++;
                }
            }
            var translateX = -num * imgWidth;
            // 5.1注意此处的transition 必须要有效果 不然不进入transitionend进行判断 导致没有无缝切换效果以及小圆点跟着走的效果
            ul.style.transition = 'transform .3s';
            ul.style.transform = 'translateX('+translateX+'px)';
            flag = false;
        }
        // 6.点击过后继续不再点击继续开启定时器轮播 要先清空一下 使得只有一个定时器在运行
        clearInterval(timer);
        timer =  setInterval(function() {
        num++;
        var translateX = -num * imgWidth;
        ul.style.transition = 'transform .3s';
        ul.style.transform = 'translateX('+translateX+'px)';
    }, 2000);
    });
 
})

然后剩下的，就是一些插件使用了，这里插件不做太详细的说明因为明天开始进入jq的复习，有的是插件让你用，然后还有一个本地存储的案例虽然不难，但后面应用应该很广泛，sessionStorage生命周期在浏览器关闭之前，只能在本页面数据共享，localStorage生命周期永久存在，可多个页面数据共享，这是一个记住用户名的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 如果勾选记住用户名， 下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名 -->
    <input type="text" name="" id="">
    <input type="checkbox">记住用户名
    <script>
        var ipts = document.querySelectorAll('input')
        ipts[1].onclick = function() {
            if (this.checked) {
                localStorage.setItem('uname', ipts[0].value)
            } else {
                localStorage.removeItem('uname')
            }
        }
        if(localStorage.getItem('uname')) {
            ipts[0].value = localStorage.getItem('uname')
            ipts[1].checked = true
        }
    </script>
</body>
</html>

webapi_3 今天真真真全是大经典案例的更多相关文章

webapi_2 今天全是大经典案例
今天的案例又大又经典我想想怎么搞呢因为要用到外联样式之类的了写入内联也太大了 1. 先来一个单独小页面的吧一个仿淘宝右侧侧边栏的案例不多说都在注释里了 <!DOCTYPE html> ...
阿里云资深DBA专家罗龙九:云数据库十大经典案例分析【转载】
阿里云资深DBA专家罗龙九:云数据库十大经典案例分析 2016-07-21 06:33 本文已获阿里云授权发布,转载具体要求见文末摘要:本文根据阿里云资深DBA专家罗龙九在首届阿里巴巴在线峰会的&l ...
javascript总结41:表格全选反选,经典案例详解
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
【十大经典数据挖掘算法】PageRank
[十大经典数据挖掘算法]系列 C4.5 K-Means SVM Apriori EM PageRank AdaBoost kNN Naïve Bayes CART 我特地把PageRank作为[十大经 ...
MySQL数据库“十宗罪”【十大经典错误案例】
原文作者:张甦来源:http://blog.51cto.com/sumongodb 今天就给大家列举 MySQL 数据库中,最经典的十大错误案例,并附有处理问题的解决思路和方法,希望能给刚入行,或数 ...
JavaScript 数据结构与算法之美 - 十大经典排序算法汇总（图文并茂）
1. 前言算法为王. 想学好前端,先练好内功,内功不行,就算招式练的再花哨,终究成不了高手:只有内功深厚者,前端之路才会走得更远. 笔者写的 JavaScript 数据结构与算法之美系列用的语言是 ...
Python十大经典排序算法
现在很多的事情都可以用算法来解决,在编程上,算法有着很重要的地位,将算法用函数封装起来,使程序能更好的调用,不需要反复编写. Python十大经典算法: 一.插入排序 1.算法思想从第二个元素开始和 ...
【十大经典数据挖掘算法】EM
[十大经典数据挖掘算法]系列 C4.5 K-Means SVM Apriori EM PageRank AdaBoost kNN Naïve Bayes CART 1. 极大似然极大似然(Maxim ...
【十大经典数据挖掘算法】AdaBoost
[十大经典数据挖掘算法]系列 C4.5 K-Means SVM Apriori EM PageRank AdaBoost kNN Naïve Bayes CART 1. 集成学习集成学习(ensem ...

随机推荐

nginx负载均衡初体验
本例采取简单的轮询策略进行nginx的负载均衡处理. 在反向代理(参考:https://www.cnblogs.com/ilovebath/p/14771571.html)的基础上增加负载均衡处理的n ...
python中类的初始化案例
1 class Chinese: 2 # 初始化方法的创建,init两边双下划线. 3 def __init__(self, hometown): 4 self.hometown = hometown ...
[VM trunk ports]opensatck VM 单网卡,多VLAN配置
描述需求产生场景 1.用户在虚机运行 K8S ,采用 VLAN 模式组网,要求 VM 端口要支持 trunk,支持多个 VLAN 网络数据在同一虚拟网卡上传输. 2.需要动态的增删虚拟机上的网络接口 ...
curl常用参数详解及示例
curl简介 curl是一个开源的命令行工具,它基于网络协议,对指定URL进行网络传输,得到数据后不任何具体处理(如:html的渲染等),直接显示在"标准输出"(stdout)上. ...
IPC$管道的利用与远程控制
实验目的通过实验了解IPC$攻击的原理与方法. 实验原理 IPC$攻击的相关原理 IPC$(Internet Process Connection)是共享＂命名管道＂的资源,它是为了让进程间通信而开 ...
[Unity] 在软件标题栏显示工作路径
(一)问题项目开发中常会有开多个分支,同时启动多个 Unity 程序的情况,来回切换的时候就容易混淆,有时候还需要用 Show In Explorer 或者其他标志来确认当前使用的是哪个分支. 于是 ...
商业智能BI必备的特性，BI工具介绍
商业智能BI的本质对企业来说,商业智能BI不能直接产生决策,而是利用BI工具处理后的数据来支持决策.核心是通过构建数据仓库平台,有效整合数据.组织数据,为分析决策提供支持并实现其价值. 传统的DW/ ...
mac上Navicat新建数据库3680错误解决办法
mac上Navicat新建数据库3680错误解决办法 1.在设置里关闭mysql,若不能关闭,在终端输入: sudo /usr/local/mysql/support-files/mysql.serv ...
[入门到吐槽系列] 微信小程序敏感违规图片检测 mediaCheckAsync，客服接口消息推送的各种坑分享！
前言: 最近需要做个用户上传图片,服务端校验图片问题的需求.需要使用小程序消息推送,异步接受腾讯的图片验证回调.实在太多坑了. 相信10分钟看完本文的朋友,可以非常顺利避坑. 前期准备: 首先需要一个 ...
elasticsearch7.8.0，kibana7.8.0安装
目录 Windows下安装Elasticsearch Linux下安装Elasticsearch docker下安装Elasticsearch Kibana安装 chrome ElasticSearc ...

webapi_3 今天真真真全是大经典案例

webapi_3 今天真真真全是大经典案例的更多相关文章

随机推荐

热门专题