关于Javascript图片跳转学习

刚学习javascript,看了Javascript DOM编程艺术,学习了图片翻转的原理。

要求:点击某个链接时,在当前页面下方显示对应的图片,而不跳转到另一个窗口。

原理:

  1. 通过增加一个“占位符”图片的办法在当前主页上为图片预留一个浏览区域。
  2. 点击某个链接时,拦截网页的默认行为。
  3. 点击某个链接时,把占位符图片替换为与那个链接对应的图片。

方法 一 :

  1.  在body底部插入“占位符”图片,代码如下:

1 <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />

  2.  Javascript代码:

1 function showPic(whichPic){
2     var source=whichPic.getAttribute("href");// 获取href
3     var placeholder=document.getElementById("placeholder");
4     placeholder.setAttribute("src",source);//赋给占位符图片src
5     return false;//在onclick中不起作用
6 }

  3. <a>标签中加入onclick="showPic(this);return false;" 自己之前想为什么不能让showPic返回false达到让页面不跳转的效果,后来问了好长时间,问了熊锅,然后他解释是必须要把onclick事件分离。

方法二:onclick从a标签中分离出来,也就是说Javascript和DOM分离开来。这是熊锅教我的

 1 function showPic(){
 2     var a1 = document.getElementsByTagName("a");
 3     for(var i = 0; i < a1.length; i++){
 4         a1[i].index = i; //遍历标记每一个a标签
 5         a1[i].onclick = function(){
 6             var source = a1[this.index].getAttribute("href");//根据索引找到当前的标签
 7             var placeholder = document.getElementById("placeholder");
 8             placeholder.setAttribute("src",source);
 9             return false; //有作用,可阻止跳转
10         }
11     }
12
13 }
14 showPic();
时间: 2024-11-03 05:37:10

关于Javascript图片跳转学习的相关文章

HTML学习笔记——图片显示、图片跳转、图片相对路径

1>显示图片.用a标签实现点击图片跳转.地图标签/点击图片上固定区域跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

JavaScript 图片广告自动与手动的切换

?1.代码 <html> <head>   <script type="text/javascript" src="jquery-1.8.js"></script>   <script type="text/javascript" src="pictrue-con.js"></script>   <style>            #pic1

Javascript图片的懒加载与预加载

1. 缓载.预载的概念 这些技术不仅限于图片加载,但我们首先讨论最常用的图片加载. 缓载:延迟加载图片或符合某些条件时才加载某些图片. 预载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.缓载对服务器前端有一定的缓解压力作用,预载则会增加服务器前端压力. 2. 缓载的意义与实现 缓载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 主要体现在三种模式上: 第一种是纯粹的延迟加载,使用setTimeOut

《Javascript权威指南》学习笔记之十一:处理字符串---String类和正则表达式

一.正则表达式的基本语法 1.概念:正则表达式由普通字符和特殊字符(元字符)组成的文本模式,该模式描述在查找字符串主体时待匹配的一个或者多个字符串.正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配. 普通字符包括所有的大小写字母字符.所有数字.所有标点符号及一些特殊符号.普通字符本身可以组成一个正则表达式,也可以和元字符组合组成一个正则表达式:而元字符则具有特殊的含义,包括().[].{}./.^.$.*.+.?...|.-.?:.?=.?! 2.基本语法 3.优先权含义 二.使用

再谈javascript图片预加载技术

图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展示出来,所以lightbox显示的图片的速度体验要比直接输出的差很多,而本文说提到的预加载技术主要针对获取图片尺寸. 一段典型的使用预加载获取图片大小的例子: var imgLoad = function (url, callback) {    var img = new Image();   

javascript 图片淡入淡出效果 实例源代码

? 1 代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.<br>后面还有对js代码的详细说明,希望大家好好消化,好好理解.<br><br>html源代码: 1 <head> 2 <title>图片切换</title> 3 <script type="text/javascript" src="图片切换.js"></script> 4 <l

[JavaScript] 初中级Javascript程序员必修学习目录

很多人总感觉javascript无法入门,笔者在这里写一下自己的学习过程,以及个人认 为的最佳看书过程,只要各位能按照本人所说步骤走下去,不用很长时间,坚持 个3个月,你的js层级会提高一个档次,无他,唯有努力与坚持,请看: 1. 从头到尾对一遍<<Javascript高级程序设计>>,不懂的地方可以暂时掠过,给自己对javascript有一个大体的印象 2. 认认真真的读完这本书:<<编写可维护的javascript>>,从编码规范,技巧,模式,等各个方面

《JavaScript权威指南》学习笔记之二十---XMLHttpRequest和AJAX解决方案

一.AJAX概述 AJAX是Asynchronous JavaScript and XML的缩写,中文译作异步JavaScript和XML.AJAX 不是新的编程语言,而是一种使用现有标准的新方法,在不重新加载页面的情况下,与服务器交换数据并更新部分网页的艺术.其核心是:客户端的Javascript能够与web服务器进行异步数据交换. 二.AJAX基础---XMLHttpRequest对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHt

《Javascript权威指南》学习笔记之十六:BOM之源---BOM基本应用

BOM的基本应用包括:管理浏览器历史.解析地址和获取浏览器信息,本文将介绍这些应用. 一.浏览历史管理 1.history对象的方法和属性 History 对象包含用户(在浏览器窗口中)访问过的 URL,是 window 对象的一部分,可通过 window.history 属性对其进行访问.没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象. length属性:返回浏览器历史列表中的URl数量.是"前进"和"后退"两个按钮之下包含的地址数的总和.