编程 Javascript

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>

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

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery浮动DIV提示信息并自动隐藏的代码

Aug 29 Javascript

javascript 冒泡排序正序和倒序实现代码

Dec 14 Javascript

jquery validate添加自定义验证规则(验证邮箱邮政编码)

Dec 04 Javascript

jquery获取checkbox的值并post提交

Jan 14 Javascript

JavaScript中this详解

Sep 01 Javascript

AngularJS模块学习之Anchor Scroll

Jan 19 Javascript

js实现select二级联动下拉菜单

Apr 17 Javascript

javascript设计模式之策略模式学习笔记

Feb 15 Javascript

javascript 面向对象实战思想分享

Sep 07 Javascript

解决vue.js this.$router.push无效的问题

Sep 03 Javascript

vue使用混入定义全局变量、函数、筛选器的实例代码

Jul 29 Javascript

Node.js+Vue脚手架环境搭建的方法步骤

Mar 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