JS入门学习，写一个简单的图片库

最新推荐文章于 2024-05-22 13:52:22 发布

day67794

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量150

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fuyinsheng/p/5007622.html

版权

<!-- 新手刚开始学JS，每天坚持写点东西

坚持下去，希望能有所进步。加油~~ -->

<!DOCTYPE html>
<html>
<head>
<title>创建一个图片库</title>
<meta charset="gb2312" />
<link rel="stylesheet" href="css/layout.css">
</head>

<body>

<h1>创建一个图片库</h1>
<ul>
<li><a href="美图/1.JPG" title="这是一只狐狸" οnclick="showPic(this); return false;">狐狸</a></li>
<li><a href="美图/2.JPG" title="这是一个苹果" οnclick="showPic(this);return false;">苹果</a></li>
<li><a href="美图/3.JPG" title="这是一盘" οnclick="showPic(this);return false;">水果</a></li>
<li><a href="美图/4.JPG" title="这是一朵花" οnclick="showPic(this);return false;">花朵</a></li>
<li><a href="美图/5.JPG" title="这是杨岢" οnclick="showPic(this);return false;">傻逼</a></li>
</ul>
<img id="pic_xianshi" src="" alt="图片将在这里显示" width="600" height="400">
<p id="description">图片将在这里显示</p>

</script>
</body>

</html>

-------以下是javascript代码-----------

window.onload = function{

　　function showPic(whichpic){

　　　　var source = whichpic.getAttribute("href");　　　　　　　　　　　　 //声明source，从函数中获取href

　　　　var oDis = document.getElementsById("pic_xianshi");　　　　　　　//声明oDis, 它将代表 id为pic_xianshi这个元素

　　　　oDis.setAttribute("src",source);　　　　　　　　　　　　　　　　　　//设置oDis里的属性和值分别是 "src", source是“href”所以不用加引号了

　　　　//图片跟随有了，现在继续把文字接上

　　　　var text = whichpic.getAttribute("title");　　　　　　　　　　　　　　//声明 text，从函数中获取title

　　　　var description = document.getElementById("description");　　　　 //声明description, 从文件获取ID为description的元素

　　　　description.firstChild.nodeValue = text ;　　　　　　　　　　　　　 //最终让description中第一个节点的值同步为text的信息

　　}

没有进行太多布局和编排。自己再把思路整理一下吧~~

看看跟着能不能实现简单的效果~~ ^_^ 加油

转载于:https://www.cnblogs.com/fuyinsheng/p/5007622.html

day67794

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS入门学习，写一个简单的图片库

<!DOCTYPE html> <html><head> <title>创建一个图片库</title> <met...
复制链接

扫一扫