首页 > 编程学习 > JS,BOM试题,在实践中应用,非常详细!!

折页特效

页角平滑的展开和收缩

方法1

<!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>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        #top_right {
            width: 248px;
            display: block;
            position: fixed;
            right: 0;
            top: 0;
            background-image: url(top_right.png);
            background-repeat: no-repeat;
        }

        /*需要改变的类*/
        .t_r_0 {
            background-position: right 0;
            height: 41px;
        }

        .t_r_1 {
            background-position: right -100px;
            height: 70px;
        }

        .t_r_2 {
            background-position: right -200px;
            height: 80px;
        }

        .t_r_3 {
            background-position: right -300px;
            height: 90px;
        }

        .t_r_4 {
            background-position: right -400px;
            height: 130px;
        }

        .t_r_5 {
            background-position: right -550px;
            height: 150px;
        }

        .t_r_6 {
            background-position: right -700px;
            height: 150px;
        }
    </style>
</head>

<body style="background-color:#008EDE">
    <a class="t_r_0" id="top_right" href="#">

    </a>
    <script>
        var a = document.querySelector('a');
        var timer;
        var flag = 0, num = 0;
        a.onmouseover = function () {
            flag = 1;
            if (!timer) {
                timer = setInterval(function () {
                    if (flag == 1 && num < 6) {
                        //到达5时,满足num<6,这时会再运行一次num++,num=6
                        console.log(num);
                        num++;
                        a.className = "t_r_" + num;

                    } else if (flag == 0 && num > 0) {
                        //到达1时,满足num>0,这时会再运行一次num--,num=0
                        num--;
                        a.className = "t_r_" + num;
                        console.log(num);
                    }
             
                }, 50)
            }
        }
        a.onmouseout = function () {
            flag = 0;
        }
    </script>
</body>

</html>

方法2

<!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>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        #top_right {
            width: 248px;
            display: block;
            position: fixed;
            right: 0;
            top: 0;
            background-image: url(top_right.png);
            background-repeat: no-repeat;
        }

        /*需要改变的类*/
        .t_r_0 {
            background-position: right 0;
            height: 41px;
        }

        .t_r_1 {
            background-position: right -100px;
            height: 70px;
        }

        .t_r_2 {
            background-position: right -200px;
            height: 80px;
        }

        .t_r_3 {
            background-position: right -300px;
            height: 90px;
        }

        .t_r_4 {
            background-position: right -400px;
            height: 130px;
        }

        .t_r_5 {
            background-position: right -550px;
            height: 150px;
        }

        .t_r_6 {
            background-position: right -700px;
            height: 150px;
        }
    </style>
</head>

<body style="background-color:#008EDE">
    <a class="t_r_0" id="top_right" href="#">

    </a>
    <script>
        var a = document.querySelector('a');
        var timer1, timer2;
        var flag = 0, num = 0;
        a.onmouseover = function () {
            flag = 1;
            if (!timer1) {
                timer1 = setInterval(function () {
                    if (flag == 1 && num < 6) {
                        //到达5时,满足num<6,这时会再运行一次num++,num=6
                        num++;
                        a.className = "t_r_" + num;
                    }
                }, 50)
            }
        }
        a.onmouseout = function () {
            flag = 0;
            if (!timer2) {
                timer2 = setInterval(function () {
                    if (flag == 0 && num > 0) {
                        //到达1时,满足num>0,这时会再运行一次num--,num=0
                        num--;
                        a.className = "t_r_" + num;
                    }
                }, 50)
            }
        }
    </script>
</body>

</html>

思路:分为两个部分,一是把光标移到页角,页角展开,二是把光标移开,页角收缩

因为 css样式设置了7个样式,表现收缩,从 1—>7 展开,从7—>1 收缩

  1. 获取元素 a,设置一个定时器,一个flag
  2. 用flag 表示光标移入(flag=1)和移出(flag=0)
  3. 当移入时 flag = 1 用 a.className = "t_r_" + num; num++不断修改样式
  4. 当移出时,flag=0,然后进行num–

随机点名

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 1000px;
            height: 150px;
            margin: 0 auto;

            clear: both;
        }

        #btn {
            width: 100px;
            height: 30px;
            margin-left: 700px;
            margin-top: 20px;

        }

        .name {
            width: 100px;
            height: 30px;
            float: left;
            background-color: antiquewhite;
            margin-left: 10px;
            margin-top: 10px;
            text-align: center;
            line-height: 30px;
        }

        #span {
            float: right;
            position: relative;
            top: 55px;
            right: 185px;
        }

        h1 {
            text-align: center;
        }
        .color{
            background-color: red;
        }
    </style>

</head>

<body>
    <h1>随机点名系统</h1>

    <div class="box" id="box"></div>
    <input type="button" id="btn" value="点名" />
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        var div = document.getElementById("box");
        var t,sum;
        var flag = 0;

        for (var i = 0; i < 36; i++) {
            var s = document.createElement('div');
            s.innerHTML = "点名" + i;
            s.className = "name";
            div.appendChild(s);
        }
     
        var names = document.querySelectorAll(".name");
        btn.addEventListener('click', function () {
            if (flag == 1) {
                btn.value = "点名";
                flag = 0;
                clearInterval(t);
                return;
            }
            btn.value = "停止";
            flag = 1;
            //if (!t) { 如果加这一句的话,定时器就不会发生改变,导致无法多次点名
                t = setInterval(function () {     
                    for(var j=0;j<i;j++){
                        names[j].className = 'name';
                    }
                    var rou = Math.floor(Math.random()*(i-1));   
                    names[rou].className = 'name color';     
                }, 100)
            //}
        })
    </script>
</body>

</html>

思路:创建若干个div节点,接到父节点(div)上,用name样式,进入点击事件,如果点击“点名”,则“点名”变成“停止”,同时进行随机出现锁定某子节点,且样式变成红色,其他的样式均为原状,再点击,则变回“点名”,锁定某子节点,可以反复点名。

  1. 创建子节点,子节点名称、子节点样式、子节点接到父节点
  2. 设置flag,用于判定点名或截止的状态
  3. 进入定时器,将所有的子节点样式全部变成原状,获取随机数,把当前选定的节点样式修改成红色

注意:定时器需要重复创建

试题在我的资源里,请自行下载

Copyright © 2010-2022 dgrt.cn 版权所有 |关于我们| 联系方式