代码主要实现多个图片，点击其中一个时，将该图片在特定区域放大（含注释），请着重关注JS代码思想。
运行该代码时，注意更换图片地址，如有问题请留言。
代码如下：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style type="text/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;}#imagegallery {list-style: none;}#imagegallery li {margin: 0px 20px 20px 0px;padding: 0px;display: inline;}#imagegallery li a img {border: 0;}</style></head><body><h2>美女画廊</h2><ul id="imagegallery"><li><a href="images/1.jpg" title="美女A"><img src="images/1-small.jpg" width="100" alt="美女1"/></a></li><li><a href="images/2.jpg" title="美女B"><img src="images/2-small.jpg" width="100" alt="美女2"/></a></li><li><a href="images/3.jpg" title="美女C"><img src="images/3-small.jpg" width="100" alt="美女3"/></a></li><li><a href="images/4.jpg" title="美女D"><img src="images/4-small.jpg" width="100" alt="美女4"/></a></li></ul><div style="clear:both"></div><!--显示大图的--><img id="image" src="images/placeholder.png" alt="" width="450"/><p id="des">选择一个图片</p><script src="common.js"></script><script>//点击a标签,把a标签中的href的属性值给id为image的src属性//把a的title属性的值给id为des的p标签赋值//从ul中标签获取获取所有的a标签var aObjs=my$("imagegallery").getElementsByTagName("a");//循环遍历所有的a标签for(var i=0;i<aObjs.length;i++){//为每个a标签注册点击事件aObjs[i].onclick=function () {//为id为image的标签的src赋值my$("image").src=this.href;//为p标签赋值my$("des").innerText=this.title;//阻止超链接默认的跳转return false;};}</script></body></html>
common.js
/*** 根据id属性的值,返回对应的标签元素* @param id id属性的值,string类型的* @returns {Element} 元素对象*/function my$(id) {return document.getElementById(id);}
