简单的相册功能

userMeiName

于 2019-05-05 22:10:37 发布

阅读量502

点赞数

本文链接：https://blog.csdn.net/weixin_43608739/article/details/89856500

版权

点击a标签，把a标签中的href的属性值给id为imge的src属性
把a的title属性的值给id为des的p标签赋值

<head>
 <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #ccc;
            color: #333;
        }
        .pc{
            margin-left: 150px;
            position: relative;
        }
        h2{
            margin: 25px 0;
        }
        /*#imagegallery{*/
            /*list-style: none;*/
            /*!*display: block;*!*/
        /*}*/
        #imagegallery li{
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
            list-style: none;
        }
        #imagegallery li a img{
            width: 100px;
            height: 100px;
        }
        .pc #imge{
            position: absolute;
            top: 180px;
        }
        #des{
            position: absolute;
            top: 600px;
        }
    </style>
</head>
<body>
    <div class="pc">
        <h2>七龙珠</h2>
        <ul id="imagegallery">
            <li>
                <a href="img/dragon.jpg" title="dragon">
                    <img src="img/dragon.jpg"  ></a>
            </li>
            <li>
                <a href="img/大魔王比克.jpg" title="大魔王比克">
                    <img src="img/大魔王比克.jpg"  >
                </a>
            </li>
            <li>
                <a href="img/空塔之战.gif" title="空塔之战">
                    <img src="img/空塔之战.gif" >
                </a>
            </li>
        </ul>
        <img src="img/placeholder.png" alt="" id="imge" width="300" height="400">
        <p id="des">选择一张图片</p>
    </div>
    <script src="learn2.js"></script>
    <script>
        //从ul标签中获取所有的a标签
        var aObjs = my$("imagegallery").getElementsByTagName("a");
        //循环遍历所有的a标签
        for (var i=0;i<aObjs.length;i++) {
            //为每个a标签注册点击事件
            aObjs[i].onclick = function () {
                //为id为imge的标签的src赋值
                my$("imge").src = this.href;
                //为p标签赋值
                my$("des").innerText = this.title;
                //阻止超链接默认的跳转
                return false;
            };
        }

    </script>