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

最新推荐文章于 2022-03-12 20:48:46 发布

甜甜今天学了吗

最新推荐文章于 2022-03-12 20:48:46 发布

阅读量162

点赞数

文章标签： javascript

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

版权

案例1：图片切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
    <style type="text/css">
        .box{
            width: 1200px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="image/qh.01.jpg" id="img1" width="500" height="500">
    <p></p>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
</div>
<script>
    window.onload = function (ev) {
        var img1 = document.getElementById('img1');
        var prev = document.getElementById('prev');
        var next = document.getElementById('next');
        //点击
        var count = 1; //因为图片名只有1、2····不同，所以用这个来改变
        var minimg = 1 ,maximg = 4;
        prev.onclick = function (ev1) {
            if (count === minimg){
                count = maximg;
            }
            else {
                count--;
            }
            img1.setAttribute('src','image/qh.0' + count + '.jpg');
        };
        next.onclick = function (ev1) {
            if (count === maximg){
                count = minimg;
            }
            else {
                count++;
            }
            img1.setAttribute('src','image/qh.0' + count + '.jpg');
        }
    }
</script>
</body>
</html>

案例2：关闭小广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关闭小广告</title>
    <style type="text/css">
        .box{
            position: relative;
            width: 250px;
        }
        .close{
            position: absolute;
            right: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="image/000.jpg" width="250" id="img1">
    <img src="image/qh.04.jpg" width="50" class="close" id="img2">
</div>
<script>
    window.onload = function (ev) {
        var img1 = document.getElementById('img1');
        var img2 = document.getElementById('img2');
        img2.onclick = function (ev1) {
            //this.parentNode.remove(); //直接将box删除
            this.parentNode.style.display = 'none';  //通过css样式隐藏
        }
    }
</script>
</body>
</html>

案例3：风景相册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>风景美如画</title>
    <style type="text/css">
        .box{
            margin: 0 auto;
            position: relative;
        }
        .fj{
            list-style: none;
            width: 400px;
        }
        .fj li{
            float: left;
            width: 100px;
        }
    </style>
</head>
<body>
<div class="box">
    <p id="des">蓝龙</p>
    <img src="image/qh.01.jpg" width="400" id="img1">
    <ul class="fj" id="fjj">
        <li>
            <a href="image/qh.01.jpg" title="蓝龙">
                <img src="image/qh.01.jpg" width="100" alt="蓝龙">
            </a>
        </li>
        <li>
            <a href="image/qh.02.jpg" title="橘子">
                <img src="image/qh.02.jpg" width="100" alt="橘子">
            </a>
        </li>
        <li>
            <a href="image/qh.03.jpg" title="女孩">
                <img src="image/qh.03.jpg" width="100" alt="女孩">
            </a>
        </li>
        <li>
            <a href="image/qh.04.jpg" title="青蛙">
                <img src="image/qh.04.jpg" width="100" alt="青蛙">
            </a>
        </li>
    </ul>
</div>
<script>
    window.onload = function (ev) {
        var des = document.getElementById('des');
        var img1 = document.getElementById('img1');
        var fj = document.getElementById('fjj');
        var alist = fj.getElementsByTagName('a');//拿到fj里的a标签
        for (var i = 0; i < alist.length ;i ++){
            var a = alist[i];
            a.onclick = function (ev1) {
                des.innerText = this.title;
                img1.setAttribute('src',this.href);
                return false;//结束a标签默认的跳转，比如结束href
            }
        }
    }
</script>

案例4：图标切换
鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图标切换</title>
</head>
<body>
<img src="image/000.jpg" width="250">
<script>
    window.onload = function (ev) {
        var img1 = document.getElementsByTagName('img')[0];
        //鼠标进入图片，.onmouseover
        img1.onmouseover = function (ev1) {
            this.setAttribute('src','image/77_WPS1图片.png');
        };
        //鼠标离开图片，.onmouseout
        img1.onmouseout = function (ev1) {
            this.setAttribute('src','image/77_WPS图片.png');
        };
        //鼠标在图片上移动，.onmousemove
        // img1.onmousemove = function (ev1) {
        //     this.setAttribute('src','image/000.jpg');
        // }
    }
</script>
</body>
</html>

甜甜今天学了吗

关注

0
点赞
踩
4

收藏

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

案例1：图片切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片切换</title> <style type="text/css"> .box{ widt...
复制链接

扫一扫