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

随机推荐

Solution -「Tenka1 2019 D」Three Colors
\(\mathcal{Description}\) Link. 给定 \(\{a_n\}\),把每个元素划分入可重集 \(R,G,B\) 中的恰好一个,求满足 \(\sum R,\sum G, ...
我们一起来学grep
文章目录 grep 介绍 grep 命令格式 grep 命令选项 grep 实例查找指定进程查找指定进程个数从文件中读取关键词进行搜索从多个文件中查找关键字输出以u开头的行输出非u开头的行 ...
intellij IDEA 安装、简单使用与创建javaWeb项目
这里我用mac for intellij IDEA 进行演示 1.安装安装的话不多说与我之前发的webstorm一样这里提供下intellij IDEA的破解站http://xidea.onl ...
Linux系列——常规基础操作
1.配置IP a.若安装桌面版系统,直接GUI画面配置,操作直观.简单 b.若安装非桌面版系统,进行如下配置: 1).ifconfig命令(临时配置,重启后失效) ifconfig eth ...
干掉Session？这个跨域认证解决方案真的优雅！
用户登录认证是 Web 应用中非常常见的一个业务,一般的流程是这样的: 客户端向服务器端发送用户名和密码服务器端验证通过后,在当前会话(session)中保存相关数据,比如说登录时间.登录 IP 等 ...
PON/产线测试解决方案
第一章方案背景与概述1.1 方案背景随着网络的高速发展与网络速率的不断提升,用户对网络产品的可靠性要求也越来越高.网络产品的故障符合"浴盆曲线"规律,生产过程中的严格测试能够及 ...
【windows安全性之访问控制】访问控制详细解说
windows的安全性的两个基本支柱是身份验证(登入)和授权(访问控制). 身份验证是标识用户的过程 ,授权在验证了所标识用户是否可以访问特定资源之后进行. 相关的命名空间和类: System.Sec ...
C# new操作符的作用
CLR要求所有对象(实例)都用new操作符创建,那么new操作符做了哪些事呢?1. 计算字节数计算类型及其所有基类型(父类)中定义的所有实例字段需要的字节数.堆上每个对象都需要一些额外的成员, ...
CAS单点登录(一)——初识SSO
转载:https://blog.csdn.net/Anumbrella/article/details/80821486 一.初识CAS 首先我们来说一下CAS,CAS全称为Central Authe ...
Qt：QWebChannel
0.说明 QWebChannel的作用是将QObject展示给的HTML客户. QWebChannel是连接C++应用和HTML/JS应用的桥梁.通过把一个QObject传入QWebChannel并在 ...

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

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

随机推荐

热门专题