<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript图片库 2017 09 12</title> </head> <body> <h1>Show photos</h1> <ul> <!-- onclic="" showPic(this);把链接自身做参数 return false;这个语句给定这个链接的默认行为没触发，即跳转到新的图片页面这个事件没触发而是执行showPic函数的内容 --> <li> <a href="img/1.jpg" title="a bike" onclick="showPic(this);return false;">bike</a> </li> <li> <a href="img/2.jpg" title="a cat" onclick="showPic(this);return false;">cat</a> </li> <li> <a href="img/4.jpg" title="a twin" onclick="showPic(this); return false;">twin</a> </li> <li> <a href="img/6.jpg" title="a beer" onclick="showPic(this); return false;">beer</a> </li> </ul> <img id="placeholder" src="img/7.jpg" alt="zhanweiphoto"> </body> </html>
JavaScript图片库 2017 09 12
<script> //建立一个函数替换占位图片 //whichPic代表指向某个图片的<a>元素 function showPic(whichPic){ //分解图片的路径，通过whichPic调用getAttribute得到，把href作为参数传给getAttribute（） //获得链接图片 var source=whichPic.getAttribute("href"); //获取占位符图片 var placeholder=document.getElementById("placeholder"); //改变 placeholder.setAttribute("src",source); //下行代码不用DOM有同样的效果 //placeholder.src=source; } </script>