<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS图片库</title>
　　<style>
　　li {
　　　　list-style-type: none;
　　}
　　#plac {
　　　　width: 400px;
　　　　height: 600px;
　　　　display: block;
　　　　margin-left: 50%;
　　　　margin-top: -150px;;
　　}
　　</style>
</head>
<body>
　　<h1>图片库</h1>
　　<ul>
　　　　<li><a href="img/02.jpg" onclick = "showpic(this); return false;" title="一只狗" >一只狗</a></li>
　　　　<li><a href="img/01.jpg" onclick = "showpic(this); return false;" title="汤圆">汤圆</a></li>
　　　　<li><a href="img/03.jpg" onclick = "showpic(this); return false;" title="一只猫">一只猫</a></li>
　　　　<li><a href="img/04.jpg" onclick = "showpic(this); return false;" title="西瓜">西瓜</a></li>
　　　　<img id="plac" src="img/05.jpg" alt="玄幻">
　　</ul>
<script>
　　function showpic(whichpic) {
　　　　var source = whichpic.getAttribute("href");
　　　　var plac = document.getElementById("plac");
　　　　plac.setAttribute("src",source);
　　}
</script>
</body>
</html>
js段代码：
　　var source = whichpic.getAttribute("href");　　获取whichpic（形参）的href属性；
　　var plac = document.getElementById("plac");　　获取plac（id）的元素；
　　plac.setAttribute("src",source);　　改变plac的src属性的值，为source;
 
　　onclick = "showpic(this); return false;"　　onclick事件绑定showpic函数，形参this为该对象，此处指<a>元素节点；　　return false :组织事件的默认行为发生——>跳转到图片窗口查看图片（这不是我们希望看到的）

js图片库的更多相关文章

  1. js图片库 案例

    事件处理函数:事件处理函数的作用是,在特定事件发生时调用特定的JavaScript代码.本例中想要在用户点击某个链接的时候触发一个动作,所以需要使用onclick事件处理函数. 添加事件处理函数的语法 ...

  2. js 图片库 改进版

    平稳退化 js与html标记分离? 如果有两个函数:firstFunction和secondFunction,如果想让它们俩都在页面加载时得到执行,可以调用函数addLoadEvent,只有一个参数, ...

  3. 平稳退化，JS和HTML标记分离，极致性能的JavaScript图片库

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. JavaScrtip之JS最佳实践

    一.JavaScript之平稳退化 这边使用一个当用户点击某个页面内某个链接弹出一个新窗口的案例: JavaScript使用window对象的open()方法来创建新的浏览器窗口; window.op ...

  5. JS笔记03

    JS图片库 标记 需求效果: 网页中的图片链接显示在网页中的图片框内部而不是打开新的页面 //html部分 <!DOCTYPE html> <html> <head> ...

  6. JavaScript之insertBefore()和自定义insertAfter()的用法。

    在JS图片库的第五版开发完后http://www.cnblogs.com/GreenLeaves/p/5691797.html#js_Five_Version我们发现一个问题,就是假设在图片列表之后还 ...

  7. JavaScript之firstChild属性、lastChild属性、nodeValue属性学习

    1.数组元素childNodes[0]有更直观易读的优点,这边在介绍一个有同样功能的属性,且更加语义化-------->firstChild属性 假设我们需要目标元素节点下的所有子元素中的第一个 ...

  8. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

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

    <!-- 新手刚开始学JS,每天坚持写点东西 坚持下去,希望能有所进步 .  加油~~ --> <!DOCTYPE html>                         ...

随机推荐

  1. 现代 PHP 新特性 —— 闭包

    一.概述 闭包是指在创建时封装周围状态的函数,即使闭包所在的环境的不存在了,闭包中封装的状态依然存在.闭包对象实现了__invoke()魔术方法,只要变量名后有(),PHP就会查找并调用__invok ...

  2. CF #552（div3）F 背包问题

    题目链接:http://codeforces.com/contest/1154/problem/F 题意:一个商店有n个物品,每个物品只能买一次,同时有m种优惠,即一次买够x件后,这x件中最便宜的k件 ...

  3. 初识ldap

    什么是LDAP? LDAP的英文全称是Lightweight Directory Access Protocol,一般都简称为LDAP.它是基于X.500标准的, 但是简单多了并且可以根据需要定制.与 ...

  4. Android 开发第一项目——计算器的开发记录

    2017.4.1 今天布局界面基本完成,现在写了一点事件绑定.计划是多用动态绑定,随时用随时改.关于布局方面,昨天弄到很晚,原因是Layout使用错误,用的自带的,没仔细看,预览的时候没有问题但是真机 ...

  5. linux-0.11 内核源码学习笔记一（嵌入式汇编语法及使用）

    linux内核源码虽然是用C写的,不过其中有很多用嵌入式汇编直接操作底层硬件的“宏函数”,要想顺利的理解内核理论和具体实现逻辑,学会看嵌入式汇编是必修课,下面内容是学习过程中的笔记:当做回顾时的参考. ...

  6. 13、属性的get（存）和set（取）器

    原因:当对年龄重新进行赋值的时候就会调用set方法,然后进行判断,如果赋值小于10就会抛出异常.

  7. git(二) 分支管理

    概念 分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习Git的时候,另一个你正在另一个平行宇宙里努力学习SVN. 如果两个平行宇宙互不干扰,那对现在的你也没啥影响.不过,在某个时间点,两个平行宇 ...

  8. springboot使用redisTemplate遇到的问题

    概述 最近工作中新构建了一个项目,用的springboot,由于项目中要使用各种各样的缓存,就使用了spring-data-redis,这个东西比我想象中要难使用的多啊,而且我还遇到个问题,就是在用R ...

  9. 外网win10 64位环境下 为内网win7 32位安装三方包的最靠谱手段：python64位、32位全安装。

    经过一周的各种折磨,如题.以下是我的经验和教训. 我的外网是win10 64位,内网环境win7 32位.由于未知原因,anaconda无法安装!!! 其实最靠谱的安装三方包的还是whl包.但是很有可 ...

  10. PYTHON实现算术表达式构造二叉树

    LEETCOCE 224. Basic Calculator Implement a basic calculator to evaluate a simple expression string. ...