标签：jpg 链接 cli win 学生 语句 doctype attr 页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript图片库 2017 09 12</title>
<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>
</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>
标签：jpg 链接 cli win 学生 语句 doctype attr 页面
原文地址：http://www.cnblogs.com/xxta/p/7511073.html
