javaScript学习:图片库

Html:

 1 <h1>Snapshots</h1>
 2 <ul>
 3     <li><a href="images/1.jpg" onclick="show(this);return false;" title="one" >第一张图片</a></li>
 4     <li><a href="images/2.jpg" onclick="show(this);return false;" title="two" >第二张图片</a></li>
 5     <li><a href="images/3.jpg" onclick="show(this);return false;" title="three" >第三张图片</a></li>
 6     <li><a href="images/4.jpg" onclick="show(this);return false;" title="four" >第四张图片</a></li>
 7 </ul>
 8     <!--onclick事件函数触发后返回的是false 所以链接不会被打开  -->
 9     <a href="http://www.baidu.com" onclick="return false">click me to baidu</a>
10 <img id="pla" src="images/6.jpg" / alt="图片库">

JavaScript:

 1 <script type="text/javascript">
 2         /*
 3         把这个函数命名为showPic,给这个函数的参数命名为whichpic
 4         获取pla的位置,把把它赋给变量placeholder
 5        使用setAttribute方法对placeholder元素的src属性进行刷新
 6         }*/
 7         function show(pic){
 8             var sour = pic.getAttribute(‘href‘);
 9             var placeholder  = document.getElementById(‘pla‘);
10             placeholder.setAttribute(‘src‘,sour);
11         }
12 </script>
时间: 2024-10-26 21:57:16

javaScript学习:图片库的相关文章

javascript学习

javascript 学习 title: Javascripttags: javascript,学习grammar_cjkRuby: true--- 定义变量 三种形式 var name; var name = "zhang san"; var name; name = "zhang san"; Javascript 的数据类型 6种数据类型 字符串单引号或双引号 var name = "zhang san"; var name = 'zhang

Javascript 学习笔记 2: 标识语句

可以在任何语句声明之前使用唯一标识(identifier)和冒号(:)用来标记该语句: identifier: statement 这样,你可以在程序的任何其他地方通过标识来使用这个语句.即使在语句内部也可以使用该语句的标识(例如:循环语句和条件语句).当在一个循环语句前添加一个标识,你可以在语句内部通过break 标识来退出当前循环,也可以通过continue标识来继续执行该语句.例如: mainloop: while(token != null) { // Code omitted... c

JavaScript学习之DIV层与图像

DIV层与图像 一.设计一个可定位的层 1.设置位置(position)和大小 (1)绝对定位(absolute):以页面边框为参照,只要设置好绝对位置,那么元素的位置会始终固定在距离边框某个位置的距离. 绝对定位有两个属性:left和top,分别是距离网页左边和网页顶部的绝对位置,可借助style属性直接设置: style="position:absolute;left:距离左边距离;top:距离顶部距离" (2)相对定位(relative):需要有一个参照元素,设置好相对位置和参照

JavaScript学习05 定时器

JavaScript学习05 定时器 定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒) 功能:执行<表达式>一次. 例子: <!DOCTYPE html> <html> <head> <title>timer1.html</title> <meta http-equiv="keywords" co

Javascript学习--------认识window窗口对象

window对象: Window 对象表示浏览器中打开的窗口. 可以通过window对象设置窗口的大小,位置等. 还可以控制是否加载网页等. window对象集合: 集合 描述 frames[] 返回窗口中所有命名的框架. 该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>.属性 frames.length 存放数组 frames[] 中含有的元素个数.注意,frames[] 数组中引用的框架可能还包括框架,它们自己也具有 frames[] 数

Javascript学习------FileSystemObjec对象

动态创建FileSystemObject对象: var fso=new FileSystemObject("Scripting.FileSystemObject"); (接下来可以用变量fso对Drive对象.Drives集合.File对象.Files集合.Folder对象.Folders集合以及TextStream对象进行相应的操作.) FileSystemObject对象的方法 ·GetAbsolutePathName()方法:该方法根据提供的路径返回完整的路径. ·GetBase

javascript学习笔记---ECMAScript-判断变量类型

判断类型之前,先要清楚有哪些类型. (理理思路:程序由数据和方法构成,数据由简单数据和复杂数据构成) 即类型有: 数据(简单数据:boolean,string,num,undefined,null.复杂数据:object), 方法(function) 万能的typeof,神一样的方法 typeof(1);// num typeof("hello");// string   typeof(false);// boolean var vFlag; typeof(vFlag);// unde

HTMl5/CSS3/Javascript 学习推荐资源

HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/Python/Nodejs/Java/ASP .NET只要和展示有关的部分都可以称之为前端.在这里由于篇幅的限制,我们只推荐与HTML+CSS+Javascript三者有关的前端技术 入门 w3school html5 简单HTML5的入门教程 w3school css3 简单的CSS3入门教程 J

javascript学习4-练习之1转置矩阵

1.做了个小小练习,对矩阵进行转置和对不规则的二维数组进行行列互换(不规则二维数组不存在有转置矩阵一说).用以加深对二维数组的理解. 2.效果图如下: 3.两种方式的代码分别如下: 3.1规则矩阵转置: 1 //规则转置 2 var array2=[[1,2,3],[4,5,6]]; 3 var array22=new Array(); 4 array22[0]=new Array(2); 5 array22[1]=new Array(2); 6 array22[2]=new Array(2);

javascript学习3-自定义函数

javascript自定义函数,很简单的小例子. 实现效果:输入两个数和运算符号,根据不同运算符对数据进行计算,返回值 代码: 1 <html> 2 <head> 3 <script type="text/javascript"> 4 var num1=window.prompt('请输入第一个num'); 5 var num2=window.prompt('请输入第二个num'); 6 var operator=window.prompt('请输入