<!-- 新手刚开始学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="这是一只狐狸" onclick="showPic(this); return false;">狐狸</a></li>
<li><a href="美图/2.JPG" title="这是一个苹果" onclick="showPic(this);return false;">苹果</a></li>
<li><a href="美图/3.JPG" title="这是一盘" onclick="showPic(this);return false;">水果</a></li>
<li><a href="美图/4.JPG" title="这是一朵花" onclick="showPic(this);return false;">花朵</a></li>
<li><a href="美图/5.JPG" title="这是杨岢" onclick="showPic(this);return false;">傻逼</a></li>
</ul>
<img id="pic_xianshi" src="" alt="图片将在这里显示" width="600" height="400">
<p id="description">图片将在这里显示</p>

<script src="js/showPic.js">

</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的信息

  }

}

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

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

JS入门学习,写一个简单的图片库的更多相关文章

  1. 用node.js从零开始去写一个简单的爬虫

    如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...

  2. 使用 js,自己写一个简单的滚动条

    当我们给元素加上 overflow: auto;  的时候,就会出现滚动条,然而浏览的不同,滚动条的样式大不一样,有些甚至非常丑. 于是就想着自己写一个滚动条,大概需要弄清楚一下这几个点: 1.滚动条 ...

  3. 第一个Three.js程序——动手写一个简单的场景

    三维场景基本要素: 步骤: 代码: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  4. js eval函数写一个简单的计算器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 原生js 基于canvas写一个简单的前端 截图工具

    先看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  6. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  7. laravel学习:php写一个简单的ioc服务管理容器

    php写一个简单的ioc服务管理容器 原创: 陈晨 CoderStory 2018-01-14 最近学习laravel框架,了解到laravel核心是一个大容器,这个容器负责几乎所有服务组件的实例化以 ...

  8. (原创)如何使用boost.asio写一个简单的通信程序(一)

    boost.asio相信很多人听说过,作为一个跨平台的通信库,它的性能是很出色的,然而它却谈不上好用,里面有很多地方稍不注意就会出错,要正确的用好asio还是需要花一番精力去学习和实践的,本文将通过介 ...

  9. 大前端工程化之写一个简单的webpack插件

    今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...

随机推荐

  1. Composer Player 属性设置

    /// <summary> /// 设置选中名称 /// </summary> /// <param name="name"></para ...

  2. Javascript贪食蛇小游戏

    试玩:http://hovertree.com/game/9/ 贪吃蛇是一种风靡全球的小游戏,就是一条小蛇,不停地在屏幕上游走,吃各个方向出现的蛋,越吃越长.只要蛇头碰到屏幕四周,或者碰到自己的身子, ...

  3. Unity3D 5.x 交互功能 - 光线投射、碰撞设置

    1,光线投射碰撞:第一人称视线在预置范围内(如3米)和看到的物体发生碰撞 ① 检测光线投射碰撞的脚本添加在第一人称FPSController上 #pragma strict private var c ...

  4. Spring MVC 处理静态资源文件

    摘要: 三个方案: 1.方案一:激活Tomcat的defaultServlet来处理静态文件 2.方案二: 在spring3.0.4以后版本提供了mvc:resources (需要配置annotati ...

  5. KMP算法-Java实现

    目的: 为了解决字符串模式匹配 历程: 朴素模式匹配:逐次进行比较 KMP算法:利用匹配失败得到的信息,来最大限度的移动模式串,以此来减少比较次数提高性能 概念: m:是目标串长度 n:是模式串长度 ...

  6. css中定位

    一切皆为框div.h1或p元素尝尝被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和strong等元素称为“称为”行内元素“,这是因为他们的内容显示在行中,即”行内框“. ...

  7. 从零开始学 Java - Windows 下安装 JDK

    关于未来 "我要死在火星.在我死去的时候能够想着人类能有一个美好的未来--有可持续的能源,同时能够殖民其他的星球来避免人类灭绝的最坏可能." 官网下载 直接打开官网:http:// ...

  8. Linux(五)__硬盘分区

    Linux中的文件管理机制是一种叫挂载和卸载的方式使用分区中的文件. 1.硬盘分区的概念 概述:首先我们要对硬盘分区的基本概念进行一些初步的了解,硬盘的分区主要分为基本分区(Primary Parti ...

  9. JAVA的POI操作Excel

    1.1Excel简介 一个excel文件就是一个工作簿workbook,一个工作簿中可以创建多张工作表sheet,而一个工作表中包含多个单元格Cell,这些单元格都是由列(Column)行(Row)组 ...

  10. React入门最好的学习实例-TodoList

    前言 React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 最近前端界闹的沸沸扬扬的技术当属react了,加上项目需要等等原因,自己也决定花些时间来好 ...