JavaScript+DOM制作照片展示框

最新推荐文章于 2025-06-09 12:12:49 发布

原创

最新推荐文章于 2025-06-09 12:12:49 发布 · 994 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #dom

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

先上效果截图

最终效果图

下面是实现代码和注释：

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>
                <a