zoukankan      html  css  js  c++  java
  • JavaScript 图片库

    Q:为什么要利用 JavaScript 创建图片库?

    A:① 如果所有图片放在同一个页面,会使页面变得庞大,用户下载页面时需要等待较长时间。

       ② 如果为每张图片创建一个页面,制作时需要花费许多时间。

       ③ 如果利用 JS 创建图片库,相比之下页面比较不庞大,制作时花费的时间也较短。

     

    第一步:为图片创建一个链接清单

    可以使用无序清单元素(<ul>)来列出这些图片链接。也可以使用有序清单元素(<ol>)来列出这些图片链接。

    效果:在窗口点击某个链接就可以转到相应的图片,如果要回到链接清单页面需要借助浏览器的后退按钮。

    标记清单:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3     <head>
     4         <meta charset="utf-8">
     5         <title>Image Gallery</title>
     6     </head>
     7     <body>
     8         <h1>SnapShots</h1>
     9         <ul>
    10             <li>
    11                 <a href="images/1.jpg" title="menhera酱敬礼">menhera酱敬礼</a>
    12             </li>
    13             <li>
    14                 <a href="images/2.jpg" title="menhera酱赞">menhera酱赞</a>
    15             </li>
    16             <li>
    17                 <a href="images/3.jpg" title="menhera酱找东西吃">menhera酱找东西吃</a>
    18             </li>
    19         </ul>
    20     </body>
    21 </html>

    页面表现:

    点击链接 “menhera酱敬礼”,会转到一个图片窗口:

    上面的页面表现基本令人满意。但是可以改进,下面是希望改进的地方:

    ① 点击链接后,不会转到另一个窗口而是留在当前页面。

    ② 点击链接后,链接清单与图片同时显示在页面上。

    实现步骤:

    首先添加一个“占位符”(点击链接后显示图片的地方)。

    将一张图片 placeholder.jpg 放到 images 目录下。

    标记清单新增一行代码(下面代码高亮部分):

     1 <!DOCTYPE html>
     2 <html lang="en">
     3     <head>
     4         <meta charset="utf-8">
     5         <title>Image Gallery</title>
     6     </head>
     7     <body>
     8         <h1>SnapShots</h1>
     9         <ul>
    10             <li>
    11                 <a href="images/1.jpg" title="menhera酱敬礼">menhera酱敬礼</a>
    12             </li>
    13             <li>
    14                 <a href="images/2.jpg" title="menhera酱赞">menhera酱赞</a>
    15             </li>
    16             <li>
    17                 <a href="images/3.jpg" title="menhera酱找东西吃">menhera酱找东西吃</a>
    18             </li>
    19         </ul>
    20         <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery"/>
    21     </body>
    22 </html>

    页面表现:

     此时完成了添加“占位符”。

    下面完成把“占位符”替换为点击链接后要显示的图片。

     实现将”占位符“替换为点击链接后要显示的图片,可以使用 setAttribute 方法。

    上面新增的占位符图片的语句为:<img id="placeholder" src="images/placeholder.jpg" alt="my image gallery"/>

    可以通过 setAttribute 方法将 src 属性更改为想显示的图片的文件路径。在这之前需要先通过 getElementById 获取 id 为placeholder 的对象。

    来看一下图片清单其中一条图片链接的语句:<a href="images/1.jpg" title="menhera酱敬礼">menhera酱敬礼</a>

    要获取想显示的图片的文件路径:需要先获取带 href 属性的元素节点(即指向某个图片的<a>元素),函数 showPic 的参数 whicpic 为这个元素节点,后面再讨论怎么获得。在 showPic 方法内可以在获得的元素节点上调用 getAttribute 获取文件路径,具体做法是将 href 作为参数传递给 getAttribute

    可以写一个显示图片的函数 showPic,并将 showPic.js 放在 js 目录下,在 gallery.html 中引用 showPic.js。

    在 gallery.html </body>标签之前添加语句引用 showPic.js,语句:<script src="js/showPic.js"></script>

    showPic.js 代码:

    1 //whicpic代表元素节点(指向某个图片的<a>元素)
    2 function showPic(whicpic){
    3     //获取想要显示的图片的文件地址, 并将它存入变量 source
    4     var source = whicpic.getAttribute('href');
    5     //利用 id 属性获取占位符图片,并将返回值存入变量 placeholder
    6     var placeholder = document.getElementById('placeholder');
    7     //替换“占位符”图片为想看的图片
    8     placeholder.setAttribute("src", source);
    9 }

    接下来应用 showPic.js ,将它与标记文档结合起来。

    给图片列表的链接添加行为,也就是事件处理函数(event handler)。

    需要实现的是点击图片链接触发图片展示在“占位符”位置,那么可以使用 onclick 事件处理函数。

    但是链接被点击有默认行为(转到图片窗口),需要阻断这个默认行为。onclick 函数工作机制里面有一点:如果 JS 代码返回值为 "true",onclick 会认为链接被点击了,如果 JS 代码返回值为 “false”,onclick 会认为链接没有被点击。所以,可以利用这一点,在 JS 代码加一条“return false;”的语句,这样点击链接转到图片窗口的默认行为就会被中止。

    showPic() 函数需要一个参数(带 href 属性的一个元素节点)。把 onclick 事件处理函数嵌入到一个链接中时,使用 this 做参数,在这里 this 表示 “这个 <a> 元素节点 ”。

    代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3     <head>
     4         <meta charset="utf-8">
     5         <title>Image Gallery</title>
     6     </head>
     7     <body>
     8         <h1>SnapShots</h1>
     9         <ul>
    10             <li>
    11                 <a href="images/1.jpg" title="menhera酱敬礼" onclick="showPic(this);return false;">menhera酱敬礼</a>
    12             </li>
    13             <li>
    14                 <a href="images/2.jpg" title="menhera酱赞" onclick="showPic(this);return false;">menhera酱赞</a>
    15             </li>
    16             <li>
    17                 <a href="images/3.jpg" title="menhera酱找东西吃" onclick="showPic(this);return false;">menhera酱找东西吃</a>
    18             </li>
    19         </ul>
    20         <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery"/>
    21         <script src="js/showPic.js"></script>
    22     </body>
    23 </html>

    目前,基本实现了想要改进两点:① 点击链接后,不会转到另一个窗口而是留在当前页面。② 点击链接后,链接清单与图片同时显示在页面上。

    页面效果:

    点击链接 “ menhera酱找东西吃 ” ,“占位符” 区域展示了该图片。

    文件目录:

    images文件夹、js文件夹、gallery.html 在 gallery 目录下。

    图片1.jpg、2.jpg、3.jpg、placeholder.jpg 在 images 目录下。showPic.js 在js目录下。

  • 相关阅读:
    Java 第十一届 蓝桥杯 省模拟赛 梅花桩
    Java 第十一届 蓝桥杯 省模拟赛 梅花桩
    Java 第十一届 蓝桥杯 省模拟赛 梅花桩
    Java 第十一届 蓝桥杯 省模拟赛 元音字母辅音字母的数量
    Java 第十一届 蓝桥杯 省模拟赛 元音字母辅音字母的数量
    Java 第十一届 蓝桥杯 省模拟赛 元音字母辅音字母的数量
    Java 第十一届 蓝桥杯 省模拟赛 最大的元素距离
    Java 第十一届 蓝桥杯 省模拟赛 递增序列
    Java 第十一届 蓝桥杯 省模拟赛 递增序列
    Java 第十一届 蓝桥杯 省模拟赛 最大的元素距离
  • 原文地址:https://www.cnblogs.com/xiaoxuStudy/p/12815448.html
Copyright © 2011-2022 走看看