js学习笔记（事件案例2）

最新推荐文章于 2024-06-13 16:29:32 发布

甜甜今天学了吗

最新推荐文章于 2024-06-13 16:29:32 发布

阅读量97

点赞数

文章标签： javascript

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

版权

案例5：二维码侧边显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二维码侧边显示和隐藏</title>
    <style type="text/css">
        .nod{
            width: 50px;
            height: 50px;
            background: url("image/000.jpg") no-repeat;
            position: fixed;
            top: 40%;
            left: 0;
            cursor: pointer; /*鼠标进入为手指*/
        }
        .dis{
            position: absolute;
            left: 50px;
            top: -35px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="nod" id="nod">
        <div class="dis" id="dis">
            <img src="image/qh.02.jpg" alt="公众号" width="150">
        </div>
    </div>
<script>
    window.onload = function (ev) {
        var nod = document.getElementById('nod');
        var dis = document.getElementById('dis');
        //鼠标进入
        nod.onmouseover = function (ev1) {
            dis.style.display = 'block';
        };
        //鼠标离开
        nod.onmouseout = function (ev2) {
            dis.style.display = 'none';
        }
    }
</script>
</body>
</html>

案例6：封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图标切换</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            background: url("image/qh.01.jpg") no-repeat;
            margin: 0 auto;
        }
        ul{
            position: absolute;
            display: flex; /*伸缩布局*/
            justify-content: center;
            align-items: center;
            list-style: none;
            cursor: pointer;
            top: 300px;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li id="li01"><img src="image/qh.01.jpg" width="100" height="100"></li>
        <li id="li02"><img src="image/qh.02.jpg" width="100" height="100"></li>
        <li id="li03"><img src="image/qh.03.jpg" width="100" height="100"></li>
        <li id="li04"><img src="image/qh.04.jpg" width="100" height="100"></li>
    </ul>
</div>
<script>
    window.onload = function (ev) {
        var li01 = ev11('li01');
        var li02 = ev11('li02');
        var li03 = ev11('li03');
        var li04 = ev11('li04');
        var box = ev11('box');
        function ev11(id) {
            return document.getElementById(id);
        }
        function ev2(liId, index) {
            ev11(liId).style.background = 'url("image/qh.0' + index + '.jpg") no-repeat';
        }
        li01.onmouseover = function (ev1) {
            ev2('box',1);
        };
        li02.onmouseover = function (ev1) {
            ev2('box',2);
        };
        li03.onmouseover = function (ev1) {
            ev2('box',3);
        };
        li04.onmouseover = function (ev1) {
            ev2('box',4);
        };
    }
</script>
</body>
</html>

案例7：闭包实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包实现</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        background: url("image/qh.01.jpg") no-repeat;
        margin: 0 auto;
    }
    ul{
        position: absolute;
        display: flex; /*伸缩布局*/
        justify-content: center;
        align-items: center;
        list-style: none;
        cursor: pointer;
        top: 300px;
    }
</style>
</head>
<body>
<div id="box">
    <ul>
        <li id="li01"><img src="image/qh.01.jpg" width="100" height="100"></li>
        <li id="li02"><img src="image/qh.02.jpg" width="100" height="100"></li>
        <li id="li03"><img src="image/qh.03.jpg" width="100" height="100"></li>
        <li id="li04"><img src="image/qh.04.jpg" width="100" height="100"></li>
    </ul>
</div>
<script>
    window.onload = function (ev) {
        var box = document.getElementById('box');
        var allLi = document.getElementsByTagName('li');
        for (var i = 0;i < allLi.length; i ++) {
            var sLi = allLi[i]; //取出单独li标签
            //闭包，里面i的值不受外面i的值的影响
            (function (index) {
                sLi.onmouseover = function (ev1) {
                    box.style.background = 'url("image/qh.0' + index + '.jpg") no-repeat';
                }
            })(i+1)
        }
    }
</script>
</body>
</html>

案例8：同时实现多个事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个事件</title>
</head>
<body>
<button id="btn">按钮</button>
</body>
<script>
    //一个按钮绑定几个事件，最终只能实现最后一个事件
    window.onload = function (ev) {
        var btn = document.getElementById('btn');
        btn.onclick = function (ev1) {
            window.location.href = 'http://www.baidu.com';
        };
        btn.onclick = function (ev2) {
            window.location.href = 'http://www.tmall.com';
        };
    }
</script>
</html>

addEventListener绑定多个事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个事件</title>
</head>
<body>
<button id="btn">按钮</button>
</body>
<script>
    //可以绑定多个事件
    window.onload = function (ev) {
        var btn = document.getElementById('btn');
        btn.<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个事件</title>
</head>
<body>
<button id="btn">按钮</button>
</body>
<script>
    //可以绑定多个事件
    window.onload = function (ev) {
        var btn = document.getElementById('btn');
        btn.addEventListener('click',function (ev1) {
            alert(0);
        });
        btn.addEventListener('click',function (ev1) {
            alert(1);
        });
        btn.addEventListener('click',function (ev1) {
            alert(2);
        })
    }
</script>
</html>('click',function (ev1) z{
            alert(0);
        });
        btn.addEventListener('click',function (ev1) {
            alert(1);
        });
        btn.addEventListener('click',function (ev1) {
            alert(2);
        })
    }
</script>
</html>

甜甜今天学了吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习笔记（事件案例2）

案例5：二维码侧边显示和隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>二维码侧边显示和隐藏</title> <style type="text/css"> .nod{ ...
复制链接

扫一扫