JS入门学习，写一个简单的图片库
<!-- 新手刚开始学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入门学习，写一个简单的图片库的更多相关文章
- 用node.js从零开始去写一个简单的爬虫
如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...
- 使用 js，自己写一个简单的滚动条
当我们给元素加上 overflow: auto; 的时候,就会出现滚动条,然而浏览的不同,滚动条的样式大不一样,有些甚至非常丑. 于是就想着自己写一个滚动条,大概需要弄清楚一下这几个点: 1.滚动条 ...
- 第一个Three.js程序——动手写一个简单的场景
三维场景基本要素: 步骤: 代码: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- js eval函数写一个简单的计算器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 原生js 基于canvas写一个简单的前端 截图工具
先看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- laravel学习：php写一个简单的ioc服务管理容器
php写一个简单的ioc服务管理容器 原创: 陈晨 CoderStory 2018-01-14 最近学习laravel框架,了解到laravel核心是一个大容器,这个容器负责几乎所有服务组件的实例化以 ...
- （原创）如何使用boost.asio写一个简单的通信程序（一）
boost.asio相信很多人听说过,作为一个跨平台的通信库,它的性能是很出色的,然而它却谈不上好用,里面有很多地方稍不注意就会出错,要正确的用好asio还是需要花一番精力去学习和实践的,本文将通过介 ...
- 大前端工程化之写一个简单的webpack插件
今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...
随机推荐
- tomcat启动时候报错Can't convert argument: null
一.启动报错: 为了避免导入的项目重名,我先修改了前一个项目的名称. 重新启动该项目至tomcat,报错:java.lang.IllegalArgumentException: Cant conver ...
- struts2的action是多例，servlet是单例
struts2中action是多例的,即一个session产生一个action如果是单例的话,若出现两个用户都修改一个对象的属性值,则会因为用户修改时间不同,两个用户访问得到的 属性不一样,操作得出的 ...
- Lind.DDD敏捷领域驱动框架~Lind.DDD各层介绍
回到目录 Lind.DDD项目主要面向敏捷,快速开发,领域驱动等,对于它的分层也是能合并的合并,比之前大叔的框架分层更粗糙一些,或者说更大胆一些,在开发人员使用上,可能会感觉更方便了,更益使用了,这就 ...
- java web学习总结(十九) -------------------监听器简单使用场景
一.统计当前在线人数 在JavaWeb应用开发中,有时候我们需要统计当前在线的用户数,此时就可以使用监听器技术来实现这个功能了. 1 package me.gacl.web.listener; 2 3 ...
- 常用C#关键字详解教程
很多在学习网站后台的同学都对C#的关键字有些摸不到头脑,现在就和大家一起学习一下这些关键字的含义 类型 Void 用作方法的返回类型时,void 关键字指定方法不返回值. 在方法的参数列表中不允许使用 ...
- HTML5学习笔记四 HTML文本格式化
HTML 格式化标签 HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如:粗体 or 斜体 这些HTML标签被称为格式化标签 通常标签 <strong> ...
- SharePoint 2013 托管导航及相关配置
设计完善的导航可告诉您网站的用户大量有关网站所提供业务.产品和服务的信息.通过更新导航背后的分类法,可以推动业务并保持更新,而不必在过程中重新创建其网站导航.在 SharePoint 2013 中,可 ...
- How To Collect ULS Log from SharePoint Farm
We can use below command to collect SharePoint ULS log from all servers in the Farm in PowerShell. M ...
- [Android]官网《monkeyrunner》中文翻译
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5050768.html 翻译自 Android Develope ...
- 【Swift】iOS 9 Core Spotlight
前言 感觉 Spotlight 这个功能还是蛮有用的,能提升用户活跃,增加应用内容曝光几率. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: ...