在同一个页面显示图片

最新推荐文章于 2021-06-04 20:06:59 发布

leo_dream

最新推荐文章于 2021-06-04 20:06:59 发布

阅读量166

点赞数

分类专栏： javascript 文章标签： JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/leo_dream/article/details/83173548

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

点击一个链接，在同一个页面显示图片（优美的代码）

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>显示图片</title>
<script language="javascript" src="scripts/showPic.js" type="text/javascript">
</script>
</head>

<body>
<ul id="imageGallery">
<li><a href="image/car1.jpg" title="第一张图片">第一张图片</a></li>
<li><a href="image/car2.jpg" title="第二张图片">第二张图片</a></li>
<li><a href="image/car3.jpg" title="第三张图片">第三张图片</a></li>
<li><a href="image/car4.jpg" title="第四张图片">第四张图片</a></li>
</ul><br/>

</body>
</html>

showPic.js
//显示图片

function showPic(image){
if(!document.getElementById("change")) return true;
var source=image.getAttribute("href");
var change=document.getElementById("change");
if(change.nodeName.toLowerCase()!="img") return true;
change.setAttribute("src",source);
if(!document.getElementsByName("title")) return true;
var text=image.getAttribute("title")?image.getAttribute("title"):"";
var description=document.getElementById("description");
if(description.firstChild.nodeType==3)
description.firstChild.nodeValue=text;
return false;
}

//生成"ing",''p"
function prepareChange(){
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imageGallery")) return false;
var change=document.createElement("img");
change.setAttribute("id","change");
change.setAttribute("src","image/car1.jpg");
change.setAttribute("alt","the first image");
var description=document.createElement("p");
description.setAttribute("id","description");
var descText=document.createTextNode("choose an image");
description.appendChild(descText);
var gallery=document.getElementById("imageGallery");
insertAfter(change,gallery);
insertAfter(description,change);
}

function addLoadEvent(func){
var oldOnLoad=window.onload;
if(typeof window.onload!="function"){
  window.οnlοad=func;
}
else{
  window.οnlοad=function(){
   oldOnLoad();
   func();
  }
}
}

addLoadEvent(prepareChange);
addLoadEvent(prepareGallery);

leo_dream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在同一个页面显示图片

点击一个链接，在同一个页面显示图片（优美的代码）html:&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xh...
复制链接

扫一扫