通过a标签放大图片 - ellaha

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #imagegallery>a>img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="imagegallery">
        <a href="img/1.jpg" title="你好">
            <img src="img/2.jpg" alt="你好吗">
        </a>
        <a href="img/3.jpg" title="嗯">
            <img src="img/4.jpg" alt="是吗">
        </a>
        <a href="img/3.jpg" title="嗯">
            <img src="img/4.jpg" alt="是吗">
        </a>
    </div>

    <div style="clear:both"></div>
    <img src="img/9.jpg" alt="失败" width="400px" id="image">

    <p id="des">选择图片</p>

    <script>
        // 1，获取到所有的a标签
        var imagegallery = document.getElementById('imagegallery');
        var links = document.getElementsByTagName('a');
        // 2，给所有的a标签添注册事件
        for (var i=0; i<links.length; i++){
            // 所有的a标签对应的元素
            link = links[i];
            link.onclick = function(){

                // 4，切换图片 设置p标签的内容
                //获取站位大图的标签
                var image = document.getElementById('image');
                //把img标签的src属性设置为当前点击的a标签的href

                // 循环结束之后 link指向最后一个a标签
                // image.src = link.href;
                image.src = this.href;

                // 5,设置p标签的内容
                var des = document.getElementById('des');
                //当前点击的a标签的title属性 this.title

                //通过打印对象 获取对象的所有属性
                console.dir(des)
                // 如何设置p标签中显示的内容
                des.innerText = this.title;

                // 3，取消a标签的默认行为
                return false;
            }
        }
    </script>
</body>
</html>
效果如下
posted on 2021-03-15 19:50 ellaha 阅读(601) 评论(0) 收藏举报
刷新页面返回顶部