《JavaScript+DOM编程艺术》的摘要(三)---图片库实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>图片库</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,user-scalable=no">
<style type="text/css"> </style>
</head>
<body>
<h1 style="text-align:center;">图片库的实现</h1>
<div>
<ul id="imgs">
<li><a href="img/img1.png" >一世繁华</a></li>
<li><a href="img/img2.png" >大好河山</a></li>
<li><a href="img/img3.png" >青春.女人</a></li>
</ul>
<img id="placeholder" src="img/img4.png" />
</div>
<script type="text/javascript">
function showPic(whichPic){
var source = whichPic.getAttribute('href');
var placeholder = document.getElementById('placeholder');
placeholder.src = source; }
var imgs = document.getElementById('imgs').getElementsByTagName('a');
for ( var i = ; i < imgs.length; i++ ) {
imgs[i].onclick=function (e){
if ( e && e.preventDefault ){
e.preventDefault();
}else{
window.event.returnValue = false;
}
showPic(this); } }
</script>
</body>
</html>
这是最基本的图片切换,对于我,唯一的重点就是阻止默认行为的应用
《JavaScript+DOM编程艺术》的摘要(三)---图片库实例的更多相关文章
- JavaScript DOM编程艺术读书笔记(三)
第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...
- javascript dom编程艺术笔记第三章:DOM操作的5个基本方法
JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...
- JavaScript DOM编程艺术 笔记(三)函数
函数function 是在你的代码里随时调用的语句 每个函数是个短小的脚本,arguments,传递的参数 function name(arguments){ statements; } functi ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 《JavaScript Dom 编程艺术》读书笔记-第4章
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...
- 《JavaScript DOM 编程艺术》 学习笔记
目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
- JavaScript DOM编程艺术第一章:JavaScript简史
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...
- JavaScript DOM编程艺术读后感(1)—— 平稳退化
最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...
- Javascript DOM 编程艺术(第二版)读书笔记——基本语法
Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...
随机推荐
- 关于JPA多数据源的部署persistence.xml文件配置以及对应实现类注入
<?xml version="1.0" encoding="UTF-8"?> <persistence xmlns="http: ...
- 从Quartz时间设置问题说起
已经好久没有来写点啥了,原因有很多,不过最主要的还是自己很懒很懒,今天终于意识到问题的严重性了.所以就来了.今天的这个问题也是前不久刚刚遇到的问题.先不啰嗦,说重点了. 一.问题描述 定时任务项目发布 ...
- 检测android机器是否有GPS模块
public boolean hasGPSDevice(Context context) { final LocationManager mgr = (LocationManager)context. ...
- Storm基础理论
Storm流式计算基础 .note-content {font-family: "Helvetica Neue",Arial,"Hiragino Sans GB" ...
- PHP的接口类(interface)和抽象类(abstract)的区别
<?php /** * 接口类:interface * 其实他们的作用很简单,当有很多人一起开发一个项目时,可能都会去调用别人写的一些类, * 那你就会问,我怎么知道他的某个功能的实现方法是怎么 ...
- css中em与px
Px是绝对定位 em是相对定位 1. em的值并不是固定的: 2. em会继承父级元素的字体大小. em应用: 1. body选择器中声明Font-size=62.5%:(注:在ie中把body选 ...
- C#BASE64 UTF8字符串加密解密
base 64 解码 base64 bb = new base64(); string orgStr= Encoding.Default.GetString(bb.GetDecoded("b ...
- android ViewHolder 使用
android中使用ListView ExpandableListView 数据适配器adapter很多都是自己定义,自己定义数据适配器时,要重写getView.重写getView为了不让每次调 ...
- 占成本85% SSD深度选购教你如何看颗粒
颗粒是固态硬盘负责容量和传输的介质,在这一方面上与优盘产品是相同的,从外观上看,颗粒占据了整个固态硬盘内部70%左右的空间,其同样做为成本技术,根据厂商的用料不同,成为了固态硬盘内部核心材料. 颗粒的 ...
- Delphi中运行时改变panel的位置及大小(WM_SysCommand消息配合参数使用,很奇妙) good
procedure TForm1.pnl1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Inte ...