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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
直接生成打开窗口代码,不必下载
May 14 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
使用vant的地域控件追加全部选项
Nov 03 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 VS ASP
2006/10/09 PHP
js代码实现微博导航栏
2015/07/30 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
python自定义异常实例详解
2017/07/11 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
妇产医师自荐信
2014/01/29 职场文书
全国道德模范事迹
2014/02/01 职场文书
2014年残联工作总结
2014/11/21 职场文书
交通事故代理词范文
2015/05/23 职场文书
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫