Javascript实现图片库效果
思路:
无序列表加载图片文件。用img标签加载一张图片作为占位符。当点击照片链接时,改变<a>元素的href属性。并且阻止浏览器的默认行为。
动态改变描述文字,在图片下方增加P标签。通过获取p标签内容,换成图片的title属性。
用到JS的DOM属性:
childNodes:获取父节点下的所有子节点
nodeType:节点属性
{
元素节点的属性值是:1;
属性节点的属性值是:2;
文本节点的属性值是:3;
}
nodeValue 改变文本节点的值(p元素本身是null值,获取p元素子节点其实是第一个子节点的nodeValue值)
firstChild 第一个子元素
lastChild 第二个子元素.
源码:
<body> <h1>Snapshots</h1> <ul> <li><a href="bassist.jpg" title='第一张' onclick='showpic(this); return false;' >bassist</a></li> <li><a href="concert.jpg" title='第二张' onclick='showpic(this); return false;'>concert</a></li> <li><a href="crowd.jpg" title='第三张' onclick='showpic(this); return false;'>crowd</a></li> <li><a href="guitarist.jpg" title='第四张' onclick='showpic(this); return false;'>guitarist</a></li> </ul> <img id='placeholder' src="placehoder.jpg" > <p id='description'>choose an img </p> </body>
编写showpic函数:
Function showpic(whichpic){ Var placeholder = document.getElementById(‘placeholder’); Var souce = whichpic.getAttribute(‘href’); Placeholder.setAttribute(‘src’,’souce’); Var text = whichpic.getAttribute(‘title’); Var description = document.getElementById(‘description’); description.firstChild.nodeValue = text }
总结:
重点在于事情处理函数,因为showpic需要一个参数,:一个带有href属性的元素节点参数,所以当把onclick事件处理函数嵌入到一个链接中时,需要把这个链接本身用作showpic函数的参数,所以要使用‘ this’关键字。
效果: