JavaScript 图片库_javascript图片操作库-优快云博客

本文链接：https://blog.youkuaiyun.com/dream_loverm/article/details/76552088


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.css
body{
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