html代码:
<code><!DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <title>Image Gallery</title> <body> <h1>Snapshots</h1> <ul id="showPicGallery"> <li> <a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a> </li> <li> <a href="images/coffee.jpg" title="A cup of black coffee" >Coffee</a> </li> <li> <a href="images/rose.jpg" title="A red, red rose" >Rose</a> </li> <li> <a href="images/bigben.jpg" title="The famous clock" >Big Ben</a> </li> </ul> <img id="placeholder" src="images/placeholder.gif" alt="my image gallery"/> <p id="description">Choose an images</p> <a href="https://baidu.com" class="popup">Example</a> <script src="./jas.js"/> </body> </html></code>
javascript代码:
<code>window.onload = function(){ prepareLinks(); handlePic(); } function showPic (whichpic) { var url = whichpic.getAttribute("href"); var title = whichpic.getAttribute("title"); var aElement = document.getElementById("placeholder"); var pElement = document.getElementById("description"); aElement.setAttribute("src",url); //pElement.childNodes[0].nodeValue = title; pElement.firstChild.nodeValue = title; //alert(pElement.firstChild.nodeValue) } function handlePic(){ var ulElement = document.getElementById("showPicGallery"); var aTagArray = ulElement.getElementsByTagName("a"); for(var i= 0 ; i < aTagArray.length; i++){ aTagArray[i].onclick = function(){ showPic(this); return false; } } }</code>
上边的window.onload处理函数还有改进的地方,目前的方法只是适合绑定函数少的情况。如果需要绑定很多个函数,且扩展性好的话,改进如下:
编写一个额外的,一劳永逸的代码:
<code>//有多少个函数需要加载,只需要添加这一行代码即可 addLoadEvent(handlePic); addLoadEvent(prepareLinks); function addLoadEvent(fuc){ var oldOnlodEvent = window.onload; if(typeof window.onload != "function"){ //如果处理函数上还没有绑定有函数,就像平时那样把新函数添加给它。 window.onload = fuc; }else{ //如果处理函数上已经绑定有函数,就把新函数添追加到加到现有指令的末尾。 window.onload = function(){ oldOnlodEvent(); fuc(); } } }</code>
添加样式效果图:
html代码:
<code><!DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <title>Image Gallery</title> <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen"/> <body> <h1>Snapshots</h1> <ul id="showPicGallery"> <li> <a href="images/fireworks.jpg" title="A fireworks display"> <img src="images/fireworks.jpg" alt="Fireworks"/> </a> </li> <li> <a href="images/coffee.jpg" title="A cup of black coffee" > <img src="images/coffee.jpg" alt="Coffee"/> </a> </li> <li> <a href="images/rose.jpg" title="A red, red rose" > <img src="images/rose.jpg" alt="Rose"/> </a> </li> <li> <a href="images/bigben.jpg" title="The famous clock" > <img src="images/bigben.jpg" alt="Bigben"/> </a> </li> </ul> <img id="placeholder" src="images/placeholder.gif" alt="my image gallery"/> <p id="description">Choose an images</p> <a href="https://baidu.com" class="popup">Example</a> <script src="./jas.js"/> </body> </html></code>
css代码:
<code>body{ font-family: "Heletica","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; } #showPicGallery{ list-style: none; } #showPicGallery li { display: inline; } #showPicGallery li a img{ width: 200px; height: 200px; border: 0; } ul{ padding: 0; } li{ float: left; padding: 1em; list-style: none; }</code>
文章评论