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 相关文章推荐
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
Vue.js学习示例分享
Feb 05 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 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
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
python图片合成的示例
2020/11/09 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
艺术爱好者的自我评价分享
2013/10/08 职场文书
行政管理人员精品工作推荐信
2013/11/04 职场文书
编辑找工作求职信范文
2013/12/16 职场文书
初中英语教学反思
2014/01/25 职场文书
法学专业自我鉴定
2014/02/05 职场文书
后备干部考察材料
2014/02/12 职场文书
2015年重阳节主持词
2015/07/04 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
美元符号 $
2022/02/17 杂记
Python+Tkinter制作专属图形化界面
2022/04/01 Python