JavaScript實(shí)現(xiàn)同一個頁面打開多張圖片
更新時間:2016年12月29日 10:05:25 作者:Ednah
這篇文章主要介紹了JavaScript實(shí)現(xiàn)同一個頁面打開多張圖片,具有一定的參考價值,感興趣的小伙伴們可以參考一下
我們的目標(biāo)是:
代碼:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js美術(shù)館</title> <script type="text/javascript" > function showPic(whichpic) { var source=whichpic.getAttribute("href"); var placeholder= document.getElementById("placeholder"); placeholder.setAttribute("src",source); } </script> <style> .wrap{ width:1000px; margin:0 auto; } .place{ margin:0 auto; text-align:center; } .table{ width:1000px; height:27px; margin-bottom:10px; } .table li{ float:left; line-height:27px; list-style-type: none; width: 100px; font-family: "微軟雅黑"; text-align: center; } </style> <body> <div class="wrap"> <h1>Snapshots</h1> <div class="table"> <ul> <li> <a href="images/網(wǎng)站1.jpg" onclick="showPic(this);return false;" title="A display">第一個</a> </li> <li> <a href="images/網(wǎng)站2.jpg" onclick="showPic(this);return false;" title="B display">第二個</a> </li> <li> <a href="images/網(wǎng)站3.jpg" onclick="showPic(this);return false;" title="C display">第三個</a> </li> <li> <a href="images/網(wǎng)易.PNG" onclick="showPic(this);return false;" title="D display">第四個</a> </li> <li> <a href="images/MOOC中國.PNG" onclick="showPic(this);return false;" title="E display">第五個</a> </li> </ul> </div> //添加一個占位符 <div class="place"> <img id="placeholder" src="images/ad.jpg" alt="my image" /> </div> <!--place end--> </div> <!--wrap end--> </body> </html>
效果如下:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript通過prototype給對象定義屬性用法實(shí)例
這篇文章主要介紹了JavaScript通過prototype給對象定義屬性用法,實(shí)例分析了prototype的功能及使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03js 聲明數(shù)組和向數(shù)組中添加對象變量的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s 聲明數(shù)組和向數(shù)組中添加對象變量的簡單實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07js對數(shù)組中的數(shù)字從小到大排序?qū)崿F(xiàn)代碼
對數(shù)組中的數(shù)字從小到大排序,很多時候需要用的多,需要的朋友可以參考下2012-09-09JS取數(shù)字小數(shù)點(diǎn)后兩位或n位的簡單方法
下面小編就為大家?guī)硪黄狫S取數(shù)字小數(shù)點(diǎn)后兩位或n位的簡單方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10在線編輯器的實(shí)現(xiàn)原理(兼容IE和FireFox)
在線編輯器的實(shí)現(xiàn)原理(兼容IE和FireFox)...2007-03-03