标签：
刚学习javascript，看了Javascript DOM编程艺术，学习了图片翻转的原理。
要求：点击某个链接时，在当前页面下方显示对应的图片，而不跳转到另一个窗口。
原理：
方法 一 ：
1. 在body底部插入“占位符”图片，代码如下：
1 <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
2. Javascript代码：
1 function showPic(whichPic){ 2 var source=whichPic.getAttribute("href");// 获取href 3 var placeholder=document.getElementById("placeholder"); 4 placeholder.setAttribute("src",source);//赋给占位符图片src 5 return false;//在onclick中不起作用 6 }
3. <a>标签中加入onclick="showPic(this);return false;" 自己之前想为什么不能让showPic返回false达到让页面不跳转的效果，后来问了好长时间，问了熊锅，然后他解释是必须要把onclick事件分离。
方法二：onclick从a标签中分离出来，也就是说Javascript和DOM分离开来。这是熊锅教我的
1 function showPic(){ 2 var a1 = document.getElementsByTagName("a"); 3 for(var i = 0; i < a1.length; i++){ 4 a1[i].index = i; //遍历标记每一个a标签 5 a1[i].onclick = function(){ 6 var source = a1[this.index].getAttribute("href");//根据索引找到当前的标签 7 var placeholder = document.getElementById("placeholder"); 8 placeholder.setAttribute("src",source); 9 return false; //有作用，可阻止跳转 10 } 11 } 12 13 } 14 showPic();
标签：
原文地址：http://www.cnblogs.com/t0nye/p/4227011.html
