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

随机推荐

私有化轻量级持续集成部署方案--06-私有镜像仓库-Harbor
提示:本系列笔记全部存在于 Github, 可以直接在 Github 查看全部笔记针对私有镜像仓库的问题,Docker 官方提供了搭建仓库服务的镜像服务:registry,使用此镜像就可以部署私有仓 ...
Django视图与模板（6）
前面记到数据库与模型(models)有联系,现在记录一下视图与模板,他们两个也有联系. 个人理解:视图就好像一个cpu,比较核心,就是用来处理问题的,又叫业务逻辑处理,他把处理完的结果插入到模板里面, ...
『无为则无心』Python面向对象 — 59、魔法方法
目录 1.魔法方法__new__() 2.魔法方法__init__() 3.魔法方法__del__() 4.魔法方法__str__()和__repr__() 5.魔法方法__call__() 6.魔法 ...
[题解]第十一届北航程序设计竞赛预赛——H.高中数学题
题目描述解题思路可以求得通项公式:an = 2n + 1,所以问题就变成等差数列求异或和,这个具体为什么对我还不能很好地解释清楚,先挖坑吧. 附:c++代码 1 #include <iost ...
Java并发杂谈（一）：volatile的底层原理，从字节码到CPU
volatile的特性 volatile是Java中用于修饰变量的关键字,其主要是保证了该变量的可见性以及顺序性,但是没有保证原子性:其是Java中最为轻量级的同步关键字: 接下来我将会一步步来分析v ...
信而泰IPv6协议一致性测试解决方案
信而泰IPv6协议一致性测试解决方案背景中国已经开始逐步进入万物互联的社会,相比原来的手机.电脑等接入网络,万物互联时代接入网络的智能终端会海量增加,而且在万物互联时代,网络的流量巨大,互联的 ...
将Android手机无线连接到Ubuntu实现唱跳Rap
您想要将Android设备连接到Ubuntu以传输文件.查看Android通知.以及从Ubuntu桌面发送短信 – 你会怎么做?将文件从手机传输到PC时不要打电话给自己:使用GSConnect就可以. ...
python+pytest(2)-HTTP协议基础
HTTP协议介绍简介 HTTP 即 HyperText Transfer Protocol(超文本传输协议),是互联网上应用最为广泛的一种网络协议.所有的 WWW 文件都必须遵守这个标准. 设计 H ...
IDisposable?释放非托管资源接口
原文:https://www.cnblogs.com/luminji/archive/2011/03/29/1997812.html IDisposable高级篇:https://docs.micro ...
kibana操作记录
GET _search { "query": { "match_all": {} } } GET _cat/nodes GET _cat/health GET ...

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

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

随机推荐

热门专题