javaScript学习：图片库（3）JS写元素入HTML-优快云博客

本文介绍了一个简单的图片展示网页设计方案，通过HTML与JavaScript实现点击图片链接显示大图的效果，并使用CSS进行样式美化。该方案适用于快速搭建个人相册或小型图片展示网站。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>1</title>
 5     <meta charset="utf-8">
 6     <style type="text/css">
 7         *{
 8             /* 居中*/    
 9             margin:0 auto;
10             padding:0 auto; 
11             text-align:center;
12 
13         }
14         body{
15             font-family: "Helvetica","Arial",serif;
16             color:#333;
17             background-color: #ccc;
18             margin:1em 10%;
19         }
20         h1{
21             color: #333;
22             background-color: transparent;
23         }
24         a{
25             color: #c60;
26             background-color: transparent;
27             font-weight: bold;
28             text-decoration: none;
29         }
30         ul{
31             padding: 0;
32             display:inline-block;  /* 行内块元素 加了这个属性之后，行级元素可以控制高、宽了，margin可以加纵向了*/
33         }
34         li{
35             float: left;
36             padding: 1em;
37             list-style: none;
38         }
39         img{
40             display: block;
41             clear: both;
42         }
43     </style>
44 </head>
45 <body>
46     <h1>Snapshots</h1>
47     <ul>
48         <li><a href="images/1.jpg" onclick="show(this);return false;" title="这是第一张照片的描述" >第一张图片</a></li>
49         <li><a href="images/2.jpg" onclick="show(this);return false;" title="这是第2照片的描述" >第二张图片</a></li>
50          <li><a href="images/3.jpg" onclick="show(this);return false;" title="这是第3张照片的描述" >第三张图片</a></li>
51          <li><a href="images/4.jpg" onclick="show(this);return false;" title="这是第4张照片的描述" >第四张图片</a></li>
52     </ul>
53     <!--
54     <img id="pla" src="images/6.jpg" / alt="图片库" width="300px";height="600px">   
55     <p id="description">Choose an image.</p>
56     -->
57     <script type="text/javascript">
58         var placeimg = document.createElement('img');
59         var para = document.createElement('p');
60         placeimg.setAttribute('id','pla')
61         placeimg.setAttribute('src','images/6.jpg');
62         placeimg.setAttribute('alt','图片库')
63         placeimg.setAttribute('width','300px')
64         placeimg.setAttribute('height','600px')
65         para.setAttribute('id','description')
66         var desctxt = document.createTextNode('Choose an image')
67         para.appendChild(desctxt)
68         document.getElementsByTagName('body')[0].appendChild(placeimg);
69         document.getElementsByTagName('body')[0].appendChild(para)
70 
71         function show(pic){
72             var sour = pic.getAttribute('href');
73             var placeholder  = document.getElementById('pla');
74             placeholder.setAttribute('src',sour);
75             var text = pic.getAttribute('title');
76             var description = document.getElementById('description');
77            description.firstChild.nodeValue=text;
78         }
79         var BodyElement = document.getElementsByTagName('body')[0];
80         console.log(BodyElement.childNodes);
81     </script>
82 </body>
83 </html>