JS实现图片库

    有时候我想通过点击小图片然后使其放大，这样的效果我们是怎么通过JS实现的，下面我为大家讲述DOM和非DOM的解决方案：

主代码(除了JS部分）：

	
	
	


	
Snapshots
	

		

			
				
			
		
		

			
				
			
		
		

			
				
			
		
	






	
	
	
Choose an image.

	

οnclick="showPic(this); return false;"中this指的是当前的对象，即a标签，ruturn false阻止默认行为被触发，即防止点开链接时将用户带到一个新窗口，使得用在“占位符"中打开图片，起到放大图片的效果。

DOM方案：

function showPic(whichPic){
			var source = whichPic.getAttribute("href");
			//whichPic代表一个元素节点，具体说指向某个图片的元素，getAttribute获得元素节点
			var placeholder = document.getElementById("placeholder");
			// placeholder.src = source;//与下面一行代码等价，同样可以改变元素属性
			placeholder.setAttribute("src", source);//setAttribute对placeholder元素的src属性进行刷新，将属性source值刷新到src里
			
			var text = whichPic.getAttribute("title");//获取属性为title的元素
			var description = document.getElementById("description");//得到id是description的p元素，并把它保存到变量description里
			description.firstChild.nodeValue = text;//把description对象的第一个叶子节点的nodeValu属性值设置为变量text的值
		}

 

其实上面一段代码也可以简写如下，但由于怕自己一时无法理解，所以还是推荐上述的详细的写法：

 

function showPic(whichPic){

document.getElementById("placeholder").setAttribute("src", whichPic.getAttribute("href"));

}

通过setAttribute()函数把whichPic.getAttribute("href")从a标签里获得的href属性刷新到img标签里的src属性里，

简单来说setAttribute(attribute, value)实现的把一个属性里面的内容复制并粘贴到另一个属性里;

非DOM实现：

function showPic(whichPic){
			var source = whichPic.getAttribute("href");
			//whichPic代表一个元素节点，具体说指向某个图片的元素，getAttribute获得元素节点
			var placeholder = document.getElementById("placeholder");
		        placeholder.src = source;//与上面的placeholder.setAttribute("src", source)等价
		}

非DOM的方法可移植性不如DOM好，所以更喜欢用DOM的方法。

话不多说，我们看效果图：