您的位置：首页 > Web前端 > JavaScript

Javascript在一个页面实现图片库

2017-01-15 16:36 253 查看

思路：

1、通过增加一个“占位符”图片的办法在主页上为图片预留一个浏览区域。

2、在点击导航链接时，拦截这个网页的默认行为。不让其转到另一个窗口。

3、在点击导航链接时，把“占位符”图片替换为与那个链接相对应的图片。

代码：

<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="img/024f78f0f736afc396060dbbb119ebc4b64512e1.jpg" title="picture1">Fireworks</a>
</li>
<li>
<a href="img/1593169_220319045543_2.jpg" title="picture2">Coffee</a>
</li>
<li>
<a href="img/2443543_101726406131_2.jpg" title="picture3">Rose</a>
</li>
<li>
<a href="img/3302397_195205012871_2.jpg" title="picture4">Big Ben</a>
</li>
<li>
<a href="img/u=2434715800,1445986251&fm=23&gp=0.jpg" title="picture5">hhhh</a>
</li>
</ul>

<img src="img/u=2398556927,124101125&fm=23&gp=0.jpg" id="placeholder" alt="my image gallery" />

<p id="description">Choose an image.</p>
<script type="text/javascript">
//显示图片函数
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);

var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
var a = document.getElementsByTagName("a");
for(var i = 0; i < a.length; i++) {
a[i].onclick = function() { //调用函数
showPic(this);
return false; //在onclick事件处理函数所触发的JS代码里加一条return false语句，就可以防止用户被带到目标链接窗口。
}

}
</script>
</body>
总结：

1、在onclick事件处理函数所触发的JS代码里增加一条return false语句，就可以防止用户被带到目标链接窗口，还是在原页面。

2、由childNodes属性返回的数组包含所有类型的节点，而不仅仅是元素节点。还有属性节点，文本节点。

3、元素节点的nodeType属性值是1，属性节点的nodeType属性值是2，文本节点的nodeType属性值是3。故可单独处理特定类型节点。

4、在用nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本，而会返回一个null值，<p>元素本身的nodeValue属性是一个空值。

包含在<p>元素里的文本是另一种节点，即文本节点，它是<p>元素的第一个子节点，所以我要得到的是p的第一个子节点的nodeValue属性值

比如弹出p中内容： alert(description.firstchild.nodeValue); or alert(description.childNodes[0].nodeValue);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航