【Javascript学习笔记】【DOM案例实战— —简单图库】

最新推荐文章于 2020-06-18 17:06:59 发布

欣欣__KuanG97

最新推荐文章于 2020-06-18 17:06:59 发布

阅读量192

点赞数

分类专栏：前端（js、html、css、less）

本文链接：https://blog.csdn.net/m0_37136491/article/details/80938049

版权

前端（js、html、css、less）专栏收录该内容

46 篇文章 0 订阅

订阅专栏

图库（点击链接加载对应的图片）

该图库不会在另外一个页面打开图片，此处只实现案例思想，具体图库样式从简。

效果图

这里写图片描述

实现思路

建立有一个对象作为参数的函数，获取点击对象–（链接元素）里的href属性以及title属性，并将对应的两个属性放置在对应id的容器内src和文本节点。通过点击触发函数，无论调用函数是否成功，都会因为return false 而点击链接跳到新页面查看图片的效果失效。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            width: 300px;
            height: 220px;
        }
        li{
            width: 100px;
            text-align: center;
            list-style: none;
            float: left;
        }
    </style>
    <script>
        function showPic(whichPic){
            var source = whichPic.getAttribute("href");//获取链接
            var title = whichPic.getAttribute("title");
            var obj = document.getElementById("showBox");
            var showTitle = document.getElementById("showTitle");
            obj.setAttribute("src",source);//将对应链接放到展示处
            showTitle.textContent = title;
        }   

    </script>
</head>
<body>
    <li><a href="img/1.jpg" title="img 1" onclick="showPic(this);return false;">img 1</a></li>
    <li><a href="img/2.jpg" title="img 2" onclick="showPic(this);return false;">img 2</a></li>
    <li><a href="img/3.jpg" title="img 3" onclick="showPic(this);return false;">img 3</a></li>
    <br>
    <div>
        <img id="showBox" src="img/1.jpg" alt="img show">
        <p>显示图片标题：<span id="showTitle"></span></p>
    </div>
</body>
</html>