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 相关文章推荐
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
v-slot和slot、slot-scope之间相互替换实例
Sep 04 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 session 预定义数组
2009/03/16 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
php简单判断文本编码的方法
2015/07/30 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
Eclipse + Python 的安装与配置流程
2013/03/05 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
django中的setting最佳配置小结
2017/11/21 Python
Python中存取文件的4种不同操作
2018/07/02 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
c语言常见笔试题总结
2016/09/05 面试题
网络方面基础面试题
2012/11/16 面试题
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
人事助理自荐信
2014/02/02 职场文书
好听的队名和口号
2014/06/09 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL