编程 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 相关文章推荐

模拟用户操作Input元素，不会触发相应事件

May 11 Javascript

传智播客学习之JavaScript基础篇

Nov 13 Javascript

基于jQuery的弹出消息插件 DivAlert之旅（一）

Apr 01 Javascript

表单提交前触发函数返回true表单才会提交

Mar 11 Javascript

js判断变量初始化的三种形式及推荐用的形式

Jul 22 Javascript

javascript中字体浮动效果的简单实例演示

Nov 18 Javascript

基于jquery实现简单的分页控件

Mar 17 Javascript

jQuery Mobile中的button按钮组件基础使用教程

May 23 Javascript

jQuery改变form表单的action,并进行提交的实现代码

May 25 Javascript

jQuery实现的表格展开伸缩效果实例

Sep 07 Javascript

js倒计时小实例（多次定时）

Dec 08 Javascript

javascript 中的try catch应用总结

Apr 01 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