JavaScript实现的一个基本的图片库 问题:1.当点击某个链接时,能留在这个网页而不是转到另一个窗口。
方法:1)通过增加一个“占位符”图片的办法在这个主页上为图片预留一个浏览区域。在点击某个链接时,把”占位符“图片替换为与那个链接相对应的图片。2)为了把“占位符”图片替换为想要查看的图片,需要改变它的src属性。setAttribute是最佳的选择。问题:把JavaScript函数与标记文档结合起来
方法:1.首先需要在图片库的文档里插入一个链接来引用JS脚本文件2.需要给图片列表的链接添加行为(事件处理函数)才能调用,否则一直无法实现问题:图片库文档里的每个图片链接都有一个title属性,把这个titlt属性取出来并让它和相应的图片一同显示在网页上
方法: 在原HTML文档中增加一个新的文本段title属性的值可以用getAttribute得到使用nodeValue属性来改变文本节点的值源代码 <!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>Image Gallery</title> <link rel = "stylesheet" href = "layout.css" media = "screen"/> </head> <body> <h1>Snaphshots</h1> <script type="text/javascript" src="showPic.js"></script> <ul> <li><a href="1.jpg" title="A happygirl" οnclick="showPic(this);return false;">Happy Girl</a> </li> <li><a href="2.jpg" title="Sweet sugars" οnclick="showPic(this);return false;">Surgars</a> </li> <li><a href="3.jpg" title="Delicious" οnclick="showPic(this);return false;">Delicious Food</a> </li> <li><a href="4.jpg" title="Bell Tower" οnclick="showPic(this);return false;">Bell Tower</a> </li> </ul> <img id="placeholder" src="5.jpg" alt="my image gallery" /> <p id="description">Choose an image.</p> <script src="showPic.js"></script> </body> </html> layout.cssbody{ font-family: "Helvetica","Arial",serif; color: #333; background-color: #ccc; margin: 1em 10%; } h1{ color:#333; background-color: transparent; } a{ color: #c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul{ padding:0; } li{ float:left; padding:1em; list-style:none; } img{ display: block; clear: both; }
showPic.js
JavaScript 图片库
最新推荐文章于 2021-04-26 16:35:37 发布