快捷導(dǎo)航

js實現(xiàn)在同一窗口瀏覽圖片

更新時間：2014年09月17日 16:29:33 投稿：whsnow

在同一窗口瀏覽圖片的方法有很多，本例要為大家介紹的是使用js獲取img的src屬性后進行替換

在同一窗口瀏覽圖片的方法有很多，本例要為大家介紹的是使用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>

您可能感興趣的文章:

窗口

相關(guān)文章

ant design實現(xiàn)圈選功能
ant design下運用js實現(xiàn)框選功能，這篇文章主要介紹了ant design實現(xiàn)圈選功能,本文通過實例代碼截圖的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2019-12-12
圖片加載進度實時顯示
圖片加載進度實時顯示...
2006-08-08
three.js 入門案例詳解
本篇文章主要介紹了three.js 入門案例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
Bootstrap布局之柵格系統(tǒng)學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了Bootstrap布局之柵格系統(tǒng)的學(xué)習(xí)筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
JavaScript中innerHTML，innerText，outerHTML的用法及區(qū)別
在javascript中如果我們要獲取對象內(nèi)容，js為我們提供了三種方法outerhtml、innerhtml和innertext,但他們之間具體怎么使用與具體的區(qū)別在哪里，可能很多人不知道吧，接下來跟著小編一起來學(xué)習(xí)innerHTML，innerText，outerHTML的用法及區(qū)別吧。
2015-09-09
詳解GoJs節(jié)點的選中高亮實現(xiàn)示例
這篇文章主要為大家介紹了GoJs節(jié)點的選中高亮實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
Javascript防止圖片拉伸的自適應(yīng)處理方法
這篇文章主要給大家介紹了關(guān)于利用Javascript防止圖片拉伸的自適應(yīng)處理方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12
JavaScript實現(xiàn)按鍵精靈的原理分析
這篇文章主要介紹了JavaScript實現(xiàn)按鍵精靈的原理分析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02
Raphael帶文本標(biāo)簽可拖動的圖形實現(xiàn)代碼
Javascript和Raphael順便學(xué)習(xí)了一下,主要是為了實現(xiàn)一個可拖動的矩形同時矩形上還得顯示標(biāo)簽，網(wǎng)上關(guān)于這方面的知識提的很是于是本人自不量力寫了一下，感興趣的你可不要錯過了哈，希望可以幫助到你
2013-02-02
OpenLayers3實現(xiàn)地圖顯示功能
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實現(xiàn)地圖顯示功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09