Javascript实现图片库效果

最新推荐文章于 2024-07-20 10:36:53 发布

weixin_30467087

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量84

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/luoruihuan/p/6016081.html

版权

思路：

无序列表加载图片文件。用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’关键字。

效果：

转载于:https://www.cnblogs.com/luoruihuan/p/6016081.html

weixin_30467087

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript实现图片库效果

思路：无序列表加载图片文件。用img标签加载一张图片作为占位符。当点击照片链接时，改变<a>元素的href属性。并且阻止浏览器的默认行为。动态改变描述文字，在图片下方增加P标签。通过获取p标签内容，换成图片的title属性。用到JS的DOM属性：childNodes：获取父节点下的所有子节点nodeType：节点属性{ 元素节点的属性值是：1...
复制链接

扫一扫