- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>imgegallery</title>
- <style type="text/CSS">
- *{margin: 0;padding: 0;}
- body{font-family: "微软雅黑","Arial",sans-serif;color: #222;background: #ccc;margin: 1em 10%; }
- h1{color: #333;background: transparent;}
- a{color: #333; background: transparent;font-weight: bold;text-decoration: none;}
- ul{padding: 0; overflow: hidden;}
- li{float: left;padding: 1em;list-style: none;}
- img{clear: both;}
- </style>
- <script type="text/javascript">
- function insertAfter(newElement,targetElement){
- var parente = targetElement.parentNode;
- if(parente.lastChild == targetElement){
- parente.appendChild(newElement);
- }else{
- parente.insertBefore(newElement,targetElement.nextSibling);
- }
- }
- function prepareNode(){
- console.log("prepare Node????");
- if(!document.createElement) return false;
- if(!document.createTextNode) return false;
- if(!document.getElementById) return false;
- if(!document.getElementById("imagegallery")) return false;
- var placeholder = document.createElement("img");
- var descrpt = document.createElement("p");
- var text11 = document.createTextNode("Choose an image");
- var gallery = document.getElementById("imagegallery");
- placeholder.setAttribute("id","myphoto");
- placeholder.setAttribute("src", "imge/car.jpg");
- placeholder.setAttribute("alt", "the first");
- placeholder.setAttribute("width", "400px");
- placeholder.setAttribute("height", "300px");
- descrpt.setAttribute("id", "description");
- descrpt.appendChild(text11);
- /*document.getElementsByTagName("body")[0].appendChild(placeholder);
- document.getElementsByTagName("body")[0].appendChild(descrpt); 这种方法插入的元素永远在body的最后面*/
- insertAfter(placeholder,gallery);
- insertAfter(descrpt,placeholder);
- console.log("create element!!!");
- }
- function showPic(whichPic){
- var source = whichPic.getAttribute("href");
- var placeholder = document.getElementById("myphoto");
- var text = whichPic.getAttribute("title") ? whichPic.getAttribute("title"): "";
- var description = document.getElementById("description");
- if(!document.getElementById("myphoto")){
- return true;
- }
- placeholder.setAttribute("src",source);
- if(!document.getElementById("description")){
- return false;
- }
- description.firstChild.nodeValue = text;
- return false;
- }
- function prepareShow(){
- console.log("enter prepare show!!!");
- if(!document.getElementsByName){
- return false;
- }
- if(!document.getElementById){
- return false;
- }
- if(!document.getElementById("imagegallery")){
- return false;
- }
- var galleray = document.getElementById("imagegallery");
- var links = galleray.getElementsByTagName("a");
- for(var i = 0, length = links.length;i<length;i++){
- links[i].onclick = function(){
- return showPic(this);
- }
- }
- }
- function addLoadEvent(func){//此函数添加addLoadEvent(prepareNode); addLoadEvent(prepareShow);前面的会被覆盖
- var oldonload = window.onload;
- if(typeof window.onload != 'function'){
- console.log(typeof window.onload);
- window.onload = func;
- }else{
- window.onload = function(){
- oldonload;
- func();
- }
- }
- }
- //addLoadEvent(prepareNode); addLoadEvent(prepareShow);
- window.onload = function(){
- prepareNode();
- prepareShow();
- }
- </script>
- </head>
- <body>
- <h1>snapshot</h1>
- <ul id="imagegallery">
- <li>
- <a href="imge/city.jpg" title="a beautifull city"> <!--onclick="showPic(this);return false"-->城市风景</a>
- </li>
- <li>
- <a href="imge/food.jpg" title="lots of food" ><!--onclick="showPic(this);return false"-->两个盘子的食物</a>
- </li>
- <li>
- <a href="imge/person.jpg" title="the man is not"> <!--onclick="showPic(this);return false"-->动漫人物</a>
- </li>
- <li>
- <a href="imge/woman.jpg" title="a beautifull woman" ><!--onclick="showPic(this);return false"-->一个漂亮的女人</a>
- </li>
- </ul>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/0209201615024.html
来源: http://www.codesnippet.cn/detail/0209201615024.html