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 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
PHP引用的调用方法分析
2016/04/25 PHP
Yii2如何批量添加数据
2016/05/17 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
javascript call和apply方法
2008/11/24 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
TypeScript类型声明书写详解
2019/08/28 Javascript
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python 日志增量抓取实现方法
2018/04/28 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
超级实用的8个Python列表技巧
2020/08/24 Python
详解如何修改python中字典的键和值
2020/09/29 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
小学生打架检讨书
2014/01/26 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
英文商务邀请函范文
2015/01/31 职场文书
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技