Javascript实现单张图片浏览


Posted in Javascript onDecember 18, 2014

利用空闲时间,学习JavaScript语言时写了一个链接浏览单张图片的例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> Image Gallery </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

 </HEAD>

<script language="javascript">

function showPic(whichpic){

    var source=whichpic.getAttribute("href");//获取当前点击的元素的属性href的值

    var placeholder=document.getElementById("placeholder");//获取目标

    placeholder.setAttribute("src",source);//设置目标的属性src,从而达到改变图片

    var text=whichpic.getAttribute("title");//获取当前点击的元素的属性title的值

    var description=document.getElementById("description");

    description.firstChild.nodeValue=text;//把点击元素的标题赋给<p>

    //或者 description.childNodes[0].nodeValue=text;

}

</script>

 <BODY>

  <h1>Javascript 图片馆</h1>

  <ul>

    <li>

        <a href="images/fireworks.jpg" title="Image1" onclick="showPic(this); return false;">图片一</a>

    </li>

    <li>

      <a href="images/coffee.jpg" title="Image2" onclick="showPic(this); return false;">图片二</a>

    </li>

    <li>

      <a href="images/rose.jpg" title="Image3" onclick="showPic(this); return false;">图片三</a>

    </li>

    <li>

      <a href="images/bigben.jpg" title="Image3" onclick="showPic(this); return false;">图片四</a>

    </li>

  </ul>

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

  <p id="description">选择图片.</p>

 </BODY>

</HTML>

注意:

在标签 <a></a> 上加事件我们要注意,避免使它执行跳转。
解决方法:函数返回false; 事件认为链接没有被点击。

如果href的值是javascript:void(0);也可以不跳转。

Javascript 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
JavaScript日历实现代码
Sep 12 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
JS常用函数使用指南
Nov 23 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 #Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 #Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 #Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 #Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 #Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 #Javascript
使用JS获取当前地理位置方法汇总
Dec 18 #Javascript
You might like
php切割页面div内容的实现代码分享
2012/07/31 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
PHP中soap的用法实例
2014/10/24 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
用C++封装MySQL的API的教程
2015/05/06 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Django实现组合搜索的方法示例
2018/01/23 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
上班迟到检讨书
2014/01/10 职场文书
公益广告语集锦
2014/03/13 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL