js特效5（4个特效）

最新推荐文章于 2024-08-14 17:24:57 发布

甜甜今天学了吗

最新推荐文章于 2024-08-14 17:24:57 发布

阅读量642

点赞数 1

文章标签： css js html

本文链接：https://blog.csdn.net/dawanhjiao/article/details/105068551

版权

1.随机点名

<body>
<button id="begin">开始点名</button>
<button id="over">结束点名</button>
<div id="name"></div>
<script>
    window.onload = function (ev) {
        var begin = f('begin');
        var over = f('over');
        var name = f('name');
        //定义变量
        var ding = null;
        var namearr = ['小明','小花','小红','小亮','小白','小蓝','小紫','小黄','小美'];
        name.innerText = namearr[0];
        //开始点名
        begin.onclick = function (ev1) {
            clearInterval(ding);
            ding = setInterval(function () {
                var s_num = parseInt( Math.random() * namearr.length);//随机数
                var s_name = namearr[s_num];
                name.innerText = s_name;
            },20)
        };
        //结束点名
        over.onclick = function (ev2) {
            clearInterval(ding);
        }
    };
    function f(id) {
        return document.getElementById(id);
    }
</script>
</body>

一次定时器

setTimeout(function () {

        },20)

2.匀速动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匀速动画</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 90px;
            height: 90px;
            background-color: red;
        }
    </style>
</head>
<body>
<button id="btn">开始动画</button>
<div id="box"></div>
<script>
    window.onload = function (ev) {
        var btn = f('btn');
        var box = f('box');
        var ding = null, begin = 0, step = 50, target = 599;//起始、步长，终点
        btn.onclick = function (ev1) {
            clearInterval(ding);
            ding = setInterval(function () {
                begin += step;
                if ( begin >= target){
                    begin = target;//因为begin可能会超过599，所以最后让它等于target
                    clearInterval(ding);
                }
                box.style.marginLeft = begin + 'px';
            },100)
        }
    };
    function f(id) {
        return document.getElementById(id);
    }
</script>
</body>
</html>

2.1匀速动画的封装

<script>
    window.onload = function (ev) {
      dong('btn','box',50,800);
    };
    //封装动画
    function dong(btnId, boxId, step, target) {
        var btn = f(btnId);
        var box = f(boxId);
        var ding = null, begin = 0;
        btn.onclick = function (ev1) {
            clearInterval(ding);
            ding = setInterval(function () {
                begin += step;
                if ( begin >= target){
                    begin = target;//因为begin可能会超过599，所以最后让它等于target
                    clearInterval(ding);
                }
                box.style.marginLeft = begin + 'px';
            },100)
        }
    }
    function f(id) {
        return document.getElementById(id);
    }
</script>

3.缓动动画

缓动公式：起始值 += (结束值 - 起始值) * 环动系数环动系数在0~1之间

(function (w) {
    w.Tool = {
        $: function (id) {
            return document.getElementById(id);
        }
    };
})(window);//将Tool绑到window里

<body>
<button id="btn">开始动画</button>
<div id="box"></div>
<script src="工具/Tool.js"></script>
<script>
    //缓动公式：起始值 += (结束值 - 起始值) *环动系数   环动系数在0~1
    window.addEventListener('load',function (ev) {
        var ding = null, begin = 0, target = 800;
        Tool.$('btn').addEventListener('click',function () {
            clearInterval(ding);
            ding = setInterval(function () {
                begin += (target - begin) *0.2;
                if (Math.round(begin) >= target){
                    begin = target;
                    clearInterval(ding);
                }
                Tool.$('box').style.marginLeft = begin + 'px';
            },100);
        })
    })

</script>
</body>
</html>

4.轮播切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播切换</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a{
            color: black;
            text-decoration: none;
        }
        #box{
            position: relative;
            width: 322px;
            height: 258px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        .left, .right{
            width: 60px;
            height: 250px;
            float: left;
        }
        .center{
            width: 200px;
            height: 251px;
            float: left;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            overflow: hidden;
        }
        li{
            line-height: 27px;
            text-align: center;
            border: 1px solid #ccc;
        }
        .xuan{
            background-color: red;
        }
    </style>
</head>
<body>
<div id="box">
    <ul class="left">
        <li class="xuan"><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>
    <ul class="center">
        <a href="#"><img src="image/img1.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img2.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img3.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img4.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img5.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img6.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img7.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img8.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img9.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img10.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img11.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img12.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img13.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img14.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img15.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img16.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img17.jpg" width="200" height="250"/></a>
        <a href="#"><img src="image/img18.jpg" width="200" height="250"/></a>
    </ul>
    <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.addEventListener('load',function (ev) {
        var allLi = document.getElementsByTagName('li');
        var allImg = document.getElementsByTagName('img');
        var loop = 0;//索引
        setInterval(function () {
            loop++;
            loop %= 18;//因为18一个循环
            for (var i = 0; i < allLi.length; i++){
                allLi[i].className = '';
                allImg[i].style.display = 'none';
            }
            //处理选中
            allLi[loop].className = 'xuan';
            allImg[loop].style.display = 'block';
        },1000)
    })
</script>
</body>
</html>