JS基础学习:手风琴动画/开机动画/

作者: Merbng | 来源:发表于2019-04-13 22:58 被阅读0次

JS基础学习:手风琴动画/开机动画/
JS动画_手风琴、轮播图、回调函数、渐变透明
前端第三方插件
Android开机动画及黑屏
JS动画效果
1. 控制动画
Jeptpack Compose 官网教程学习笔记（五）动画
有用的Vue第三方库
android 启动总览
进阶篇：jQuery动画（21-2）

手风琴动画

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            ul {
                list-style: none;
            }

            * {
                margin: 0;
                padding: 0;
            }

            div {
                width: 1150px;
                height: 400px;
                margin: 50px auto;
                border: 1px solid red;
                overflow: hidden;
            }

            div li {
                width: 240px;
                height: 400px;
                float: left;
            }

            div ul {
                width: 1300px;
            }
        </style>

    </head>
    <body>
        <div id="box">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <script src="../js/common.js"></script>
        <script type="text/javascript">
            // 先获取所有的li标签
            var list = my$('box').getElementsByTagName('li');
            for (i = 0; i < list.length; i++) {
                list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
                // 鼠标进入
                list[i].onmouseover = mouseOverHandle;
                // 鼠标离开
                list[i].onmouseout = mouseOutHandle;
            }

            function mouseOverHandle() {
                for (j = 0; j < list.length; j++) {
                    animate(list[j], {
                        "width": 100
                    }); //动画效果
                }
                animate(this, {
                    "width": 800
                });
            };

            function mouseOutHandle() {
                for (j = 0; j < list.length; j++) {
                    animate(list[j], {
                        "width": 240
                    }); //动画效果
                }
            };
        </script>
    </body>

</html>

开关机动画

<!DOCTYPE html>
<html lang="zh">
    <head>
        <title></title>
        <style>
            .box {
                width: 322px;
                position: fixed;
                bottom: 0;
                right: 0;
                overflow: hidden;
            }

            span {
                position: absolute;
                top: 0;
                right: 0;
                width: 30px;
                height: 20px;
                cursor: pointer;
            }
        </style>

    </head>
    <body>
        <div class="box" id="box">
            <span id="closeButton"></span>
            <div class="hd" id="headPart">
                <img src="images/t.jpg" alt="" />
            </div>
            <div class="bd" id="bottomPart">
                <img src="images/b.jpg" alt="" />
            </div>
        </div>
        <script src="js/common.js"></script>
        <script type="text/javascript">
            // 设置最下面的div的高  渐渐变成0
            my$('closeButton').onclick = function() {
                animate(my$('bottomPart'), {
                    "height": 0
                }, function() {
                    animate(my$('box'), {
                        "width": 0
                    })
                });
            };
        </script>
    </body>
</html>

数组中的方法

.shift() 删除数组中第一个元素

<script type="text/javascript">
            var arr = [10, 20, 30, 40, 50];
            console.log(arr.shift()); //删除数组中第一个元素
            console.log(arr);
</script>

.pop() 获取数组中最后一个元素
.push(“元素值”) 把元素值放到数组的最后的位置
.unshift(“元素值”) 把元素值放到数组的第一个位置

<!DOCTYPE html>
<html lang="zh">
    <head>
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var arr = [10, 20, 30, 40, 50];
            //删除数组中第一个元素,返回值是要删除的那个元素值
            // console.log(arr.shift());

            //追加到数组的最后
            //          console.log(arr.push(arr.shift()));
            //          console.log(arr.push(arr.shift()));
            //          console.log(arr.push(arr.shift()));
            //          console.log(arr.push(arr.shift()));
            //          console.log(arr.push(arr.shift()));
            //          console.log(arr);
            // 把最后一个元素放到数组的第一个位置
            arr.unshift(arr.pop())
            arr.unshift(arr.pop())
            arr.unshift(arr.pop())
            arr.unshift(arr.pop())
            arr.unshift(arr.pop())
            console.log(arr);
        </script>
    </body>
</html>

demo地址