js实现在同一窗口浏览图片


Posted in Javascript onSeptember 17, 2014

在同一窗口浏览图片的方法有很多,本例要为大家介绍的是使用js获取img的src属性后进行替换,有此需要的朋友可以参考下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  <html> 
  <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <title>Insert title here</title> 
  <style> 
   
  h1{position:absolute;margin-left:150px;} 
  ul{position:absolute;margin-top:50px;margin-left:80px;} 
  li{float:left;list-style:none;padding:1em;} 
  img{position:absolute;margin-top:100px;margin-left:100px;width:1000px;height:600px;} 
  p{position:absolute;margin-top:800px;margin-left:550px;} 
  </style> 
   
  <script> 
  function showCat(a){ 
    var osrc=a.getAttribute("href"); 
    var oimg=document.getElementById("img1"); 
    oimg.setAttribute("src",osrc); 
   
    var op=document.getElementById("p1"); 
    var otxt=a.getAttribute("title"); 
    op.childNodes[0].nodeValue=otxt;; 
  } 
  </script> 
  </head> 
  <body> 
  <h1>Cat Home</h1> 
  <ul> 
    <li> 
      <a href="img/1.jpg" title="我是白猫咪" onclick="showCat(this);return false;">白猫咪</a> 
    </li> 
    <li> 
      <a href="img/2.jpg" title="我是黑猫咪" onclick="showCat(this);return false;">黑猫咪</a> 
    </li> 
    <li> 
      <a href="img/3.jpg" title="我是花猫咪" onclick="showCat(this);return false;">花猫咪</a> 
    </li> 
  </ul> 
   
  <img id="img1" src="img/4.jpg" alt="猫咪"/> 
  <p id="p1">choose Cat Photo</p> 
   
  </body> 
  </html>
Javascript 相关文章推荐
无阻塞加载脚本分析[全]
Jan 20 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
JS随机数产生代码分享
Feb 24 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
vue如何截取字符串
May 06 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
js实现获取焦点后光标在字符串后
Sep 17 #Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 #Javascript
取得元素的左和上偏移量的方法
Sep 17 #Javascript
JS实现OCX控件的事件响应示例
Sep 17 #Javascript
javascript快速排序算法详解
Sep 17 #Javascript
js生成的验证码的实现与技术分析
Sep 17 #Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 #Javascript
You might like
在IIS上安装PHP4.0正式版
2006/10/09 PHP
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
vue组件之Alert的实现代码
2017/10/17 Javascript
webpack多页面开发实践
2017/12/18 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python实现端口复用实例代码
2014/07/03 Python
为python设置socket代理的方法
2015/01/14 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
python文本数据处理学习笔记详解
2019/06/17 Python
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
求职简历自我评价范例
2014/03/12 职场文书
校运会口号
2014/06/18 职场文书
2014和解协议书范文
2014/09/15 职场文书
网站文案策划岗位职责
2015/04/14 职场文书