JavaScript - WebAPI - 属性补充 - 案例 - attributes系列 - 京东商品展示

最新推荐文章于 2021-08-19 19:16:58 发布

Henry_ww

最新推荐文章于 2021-08-19 19:16:58 发布

阅读量92

点赞数

分类专栏：案例文章标签： js dom

本文链接：https://blog.csdn.net/Henry_ID/article/details/119532175

版权

案例专栏收录该内容

34 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>属性补充 - 京东商品展示</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
                padding-top: 15px;
            }

            .box {
                width: 350px;
                height: 420px;
                border: 1px solid #000;
                margin: 100px auto;
            }

            li {
                float: left;
                width: 20%;
                text-align: center;
            }

            img:hover {
                outline: 3px solid #0094ff;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>
                <img src="images/b1.jpg" id="big" alt="" />
            </div>
            <div>
                <ul id="ul">
                    <!--data-src是自定义属性，存放对应大图的src-->
                    <li data-src="images/b1.jpg"><img src="images/s1.jpg" alt="" /></li>
                    <li data-src="images/b2.jpg"><img src="images/s2.jpg" alt="" /></li>
                    <li data-src="images/b3.jpg"><img src="images/s3.jpg" alt="" /></li>
                    <li data-src="images/b4.jpg"><img src="images/s4.jpg" alt="" /></li>
                    <li data-src="images/b5.jpg"><img src="images/s5.jpg" alt="" /></li>
                </ul>
            </div>
        </div>
    </body>
    <script>
        // 需求: 鼠标移入到小图,更换对应的大图(大图信息在小图对应的li中)

        // 获取所有的li添加鼠标移入事件
        document.querySelectorAll("#ul li").forEach(function (li) {
            // 给li做鼠标移入事件, 取出自定义属性 赋值给 大图的src即可
            li.onmouseover = function () {
                // console.log(li.getAttribute("data-src"));

                document.getElementById("big").src = li.getAttribute("data-src");
            };
        });
    </script>
</html>

Henry_ww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - WebAPI - 属性补充 - 案例 - attributes系列 - 京东商品展示

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt
复制链接

扫一扫