JavaScript+DOM制作照片展示框

清水拌墨茶

于 2017-07-02 12:23:00 发布

阅读量952

点赞数

分类专栏： javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/zm_nizhi/article/details/74103657

版权

本文介绍如何利用JavaScript和DOM实现一个照片展示框。详细讨论了阻止事件默认行为、JavaScript的兼容性处理以及结构与行为相分离的原则。提供完整代码资源供读者下载学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果截图

最终效果图

下面是实现代码和注释：

html：

<body>
    <div class="all">
        <h1>A photographic</h1>
        <ul id="list">
            <li>
                <!--符合平稳退化，当JS脚本不能使用时，依然可以通过href访问页面-->
                <a href="images/p1.jpg" title="The Photo1" >
                    <img src="images/p1.jpg" />
                </a>
            </li>
            <li>
                <a href="images/p2.jpg" title="The Photo2" >
                    <img src="images/p2.jpg" />
                </a>
            </li>
            <li>
                <