jsvascript学习（八）- 基础内容综合案例

作者: MA木易YA | 来源:发表于2018-12-30 22:25 被阅读0次

jsvascript学习（八）- 基础内容综合案例
jsvascript学习（十二）- Offset相关综合案例
jsvascript学习（十三）- scroll相关综合案例
jsvascript学习（六）- 基础总结
机器学习汇总
Java基础语法需要学习哪些知识？
OpenGL 案例：球体世界
【转载】Axure教程(1-10)
数据透视表综合应用
jsvascript学习（十一）- scroll

案例素材可以到这里领取，提取码：8hhl

结合之前学习的定时器、变量、函数、数组等基础内容，以三个简单实例进行练习

九宫格排版
body内容是一系列的电影图片和文字描述盒子，通过点击上方的排版按钮可以实现对应样式的排版方式(3列、4列或5列)

通过计算盒子左边的距离(左边所有盒子宽度+间隙宽度)和上边距离(上方所有盒子高度+间隙高度)计算出盒子所在位置(几行几列)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #top{
            padding: 20px;
        }

        #bottom{
            position: relative;
        }

        .box{
            width: 220px;
            height: 360px;
            margin: 0 15px 15px 0;
            background-color: #e8e8e8;
        }

        .box p:last-child{
            font-size: 13px;
            color: orangered;
        }
    </style>
</head>
<body>
    <div id="top">
        <button>3列</button>
        <button>4列</button>
        <button>5列</button>
    </div>
    <div id="bottom">
        <div class="box">
            <img src="image/1.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/2.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/3.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/4.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/5.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/6.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/7.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/8.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/9.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/10.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/11.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/12.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/13.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/14.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
        <div class="box">
            <img src="image/15.jpg" alt="">
            <p>因为遇见你</p>
            <p>孙怡邓伦牵手演绎刺绣奇缘</p>
        </div>
    </div>
<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var btns = document.getElementById("top").children;
        var bottom = document.getElementById("bottom");

        // 2.监听按钮的点击
        btns[0].onclick = function () {
            j_flex(3, bottom);
        };

        btns[1].onclick = function () {
            j_flex(4, bottom);
        };

        btns[2].onclick = function () {
            j_flex(5, bottom);
        };

        function j_flex(allCols, parentNode) {
            // 2.1 定义变量
            var boxW = 220, boxH = 360, marginXY = 15;

            // 2.2 遍历
            for(var i=0; i<parentNode.children.length; i++){
                // 2.2.1 求出当前盒子所在的行和列
                var row = parseInt(i / allCols);
                var col = parseInt(i % allCols);
                // console.log("当前盒子在第" + row  + " ,第" + col);

                // 2.2.2 盒子的定位
                var currentBox = parentNode.children[i];
                currentBox.style.position = 'absolute';
                currentBox.style.left = col * (boxW + marginXY) + 'px';
                currentBox.style.top = row * (boxH + marginXY) + 'px';
            }
        }
    }
</script>
</body>
</html>

长图滚动
对一张长图(纵向)进行轮播操作，图片分为上下两部分，鼠标移动到上方则向上滚动，向下则相反，当鼠标移除图片整个盒子外部，定时器清除，轮播即暂停

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body{
            background-color: #000;
        }

        #box{
            width: 750px;
            height: 400px;
            border: 1px solid red;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }

        #pic{
            position: absolute;
            left: 0;
            top: 0;
        }

        #to_top, #to_bottom{
            width: 100%;
            height: 50%;
            /*background-color: greenyellow;*/
            position: absolute;
            left: 0;
            cursor: pointer;
        }

        #to_top{
            top: 0;
        }

        #to_bottom{
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="box">
        <img id="pic" src="images/timg.jpg" alt="">
        <span id="to_top"></span>
        <span id="to_bottom"></span>
    </div>

<script>
    window.onload = function () {
        // 1. 获取标签
        var box = document.getElementById("box");
        var pic = document.getElementById("pic");
        var to_top = document.getElementById("to_top");
        var to_bottom = document.getElementById("to_bottom");

        var timer = null, num = 0;

        // 2. 监听鼠标事件
        to_top.onmouseover = function () {
            // 2.1 清除定时器
            clearInterval(timer);

            // 2.2 设置定时器
            timer = setInterval(function () {
                 // 步长
                 num -= 10;

                 // 判断
                 if(num >= -2466){
                     pic.style.top = num + 'px';
                 }else {
                     clearInterval(timer);
                 }
            }, 20);
        };
        to_bottom.onmouseover = function () {
            // 2.1 清除定时器
            clearInterval(timer);

            // 2.2 设置定时器
            timer = setInterval(function () {
                // 步长
                num += 10;

                // 判断
                if(num <= 0){
                    pic.style.top = num + 'px';
                }else {
                    clearInterval(timer);
                }
            }, 20);
        };
        box.onmouseout = function () {
            // 清除定时器
            clearInterval(timer);
        }
    }
</script>
</body>
</html>

轮播操作
样例中分为三部分,中间显示图片，两侧分别对应图片描述，当图片转换时，两侧标签也会对应转换并且有选中效果

对标签循环，设定事件的定时器，移除则清除定时器，对图片只用设定display:none则会自动隐藏，利用浮动以及定位保证格式，注意这里的标签选中效果涉及排他操作，需要事先清除所有效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a{
            text-decoration: none;
            color: #000;
        }

        #box{
            width: 322px;
            height: 250px;
            border: 1px solid #ccc;
            margin: 100px auto;

            position: relative;
        }

        .left, .right{
            width: 60px;
            height: 250px;
            /*background-color:red;*/
            float: left;
        }

        .center{
            width: 200px;
            height: 250px;
            float: left;
            border-left:1px solid #ccc;
            border-right:1px solid #ccc;
            overflow: hidden;
        }

        li{
            line-height: 27px;
            text-align: center;
            border-bottom: 1px solid #ccc;
        }

        .left li:last-child, .right li:last-child{
            border-bottom: none;
        }

        .current{
            background: red;
        }
    </style>
</head>
<body>
<div id="box">
    <ul class="left">
        <li class="current"><a href="#">美食1</a></li>
        <li><a href="#">美食2</a></li>
        <li><a href="#">美食3</a></li>
        <li><a href="#">美食4</a></li>
        <li><a href="#">美食5</a></li>
        <li><a href="#">美食6</a></li>
        <li><a href="#">美食7</a></li>
        <li><a href="#">美食8</a></li>
        <li><a href="#">美食9</a></li>
    </ul>
    <div class="center">
        <a href="#"><img src="images/img1.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img2.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img3.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img4.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img5.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img6.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img7.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img8.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img9.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img10.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img11.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img12.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img14.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img15.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img16.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img17.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img18.jpg" width="200" height="250"></a>
        <a href="#"><img src="images/img19.jpg" width="200" height="250"></a>
    </div>
    <ul class="right">
        <li><a href="#">美食10</a></li>
        <li><a href="#">美食11</a></li>
        <li><a href="#">美食12</a></li>
        <li><a href="#">美食13</a></li>
        <li><a href="#">美食14</a></li>
        <li><a href="#">美食15</a></li>
        <li><a href="#">美食16</a></li>
        <li><a href="#">美食17</a></li>
        <li><a href="#">美食18</a></li>
    </ul>
</div>

<script>
    window.onload = function () {
        // 1. 获取需要的标签
        var allLis = document.getElementsByTagName('li');
        var allImages = document.getElementsByTagName('img');

        // 2. 索引
        var loop = 0;

        // 3.定时器
        setInterval(function () {
            // 3.1 索引++
            loop += 1;
            loop %= 18;

            // 3.2 排他
            for(var i=0; i<allLis.length; i++){
                allLis[i].className = '';
                allImages[i].style.display = 'none';
            }

            // 3.3 自己选中
            allLis[loop].className = 'current';
            allImages[loop].style.display = 'block';
        }, 1000);
    }
</script>
</body>
</html>

参考：
网易云js课程

jsvascript学习（八）- 基础内容综合案例
案例素材可以到这里领取，提取码：8hhl 结合之前学习的定时器、变量、函数、数组等基础内容，以三个简单实例进行练习...
jsvascript学习（十二）- Offset相关综合案例
案例素材可到这里领取, 提取码：gseu 1. 照片墙案例实现照片墙特效，点击图片可以让照片居中显示并有缓动特效...
jsvascript学习（十三）- scroll相关综合案例
案例素材可到这里领取, __提取码：ephx __ 1. 商品展示案例通过导航条滑动可不断看到后面的商品列表主...
jsvascript学习（六）- 基础总结
基础总结从前面总结的点来说，关于js的基础我们已经了解的差不多了，有了这些基础内容铺垫，我们已经可以着手实现一些...
机器学习汇总
机器学习汇总介绍本模块包含自己学习机器学习过程中学习过的内容，包含基础案例和实战案例，大部分以ipynb的格式...
Java基础语法需要学习哪些知识？
Java基础语法需要学习哪些知识？Java基础语法内容包含java运行环境、HelloWorld案例、关键字&[h...
OpenGL 案例：球体世界
球体世界案例是基于 OpenGL 综合案例的学习的基础上增加了纹理和镜像显示。最终效果图：总体流程图可以使用下...
【转载】Axure教程(1-10)
基础操作篇本篇包含56种常见的基础操作，初学者应在掌握本篇内容后再进行实战案例篇的学习，以免产生学习障碍。同时，...
数据透视表综合应用
今天是学习数据透视表的第四天，今天的学习内容基本上是对前面所学内容的综合运用。有了前几天的学习基础，加...
jsvascript学习（十一）- scroll
scroll家族方法 1、 onscroll —— 当元素的滚动条滚动时触发的事件 onscroll事件貌似任何实...

jsvascript学习（八）- 基础内容综合案例

相关文章

jsvascript学习（八）- 基础内容综合案例

jsvascript学习（十二）- Offset相关综合案例

jsvascript学习（十三）- scroll相关综合案例

jsvascript学习（六）- 基础总结

机器学习汇总

Java基础语法需要学习哪些知识？

OpenGL 案例：球体世界

【转载】Axure教程(1-10)

数据透视表综合应用

jsvascript学习（十一）- scroll

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

编程地带