一个简单的图片展示例子

最新推荐文章于 2023-11-06 22:55:54 发布

china_wanglong

最新推荐文章于 2023-11-06 22:55:54 发布

阅读量524

点赞数

分类专栏： javascript 文章标签： function stylesheet xhtml image html 文档

本文链接：https://blog.csdn.net/china_wanglong/article/details/8034406

版权

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=gbk" />
  <title>Image Gallery</title>
	<script type="text/javascript">
	function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return true;
    //判断 id为 placeholder 的 对象是否存在。
  //如果 placeholder 不存在 ，则返回true， 页面跳转
  //如果返回false，页面不跳转
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;//判断 id为 description 的 对象是否存在。
  if (whichpic.getAttribute("title")) {//判断 id为 description 的 属性 title 是否存在。
    var text = whichpic.getAttribute("title");
  } else {
    var text = "";
  }
  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) { //nodeType=3 说明节点是文本节点。
    description.firstChild.nodeValue = text;
  }
  return false;
}

function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  // 为保证向后兼容：我们判断document.getElementsByTagName是否可以用。
  if (!document.getElementById) return false;
  //同理
  if (!document.getElementById("imagegallery")) return false;
  //判断 imagegallery 是否存在，如果存在 就 获取。
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);//this指向 links[i] ；
	}
    links[i].onkeypress = links[i].onclick;
	 //当超链接获取焦点的时候，按任意键，触发onclick事件
	  //注意：当获取焦点的时候，回车，会触发onclick事件。
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}


/*
function t(){
alert("t")
}
function b(){
alert("b")
}
window.onload =t ;
window.onload =b ;
上面的代码发现  值输出 b ；

然后我们用 addLoadEvent：


function t(){
alert("t")
}
function b(){
alert("b")
}
function c(){
alert("c")
}

	function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {  
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(t);
addLoadEvent(b);
addLoadEvent(c);
发现都输出了。

适用范围：当window.onload在加载很多个函数时，可以使用这个函数。
*/


 
function preparePlaceholder() {
  if (!document.createElement) return false;
  if (!document.createTextNode) return false;
  var placeholder = document.createElement("img");//创建元素节点
  placeholder.setAttribute("id","placeholder");//创建属性，设置属性
  placeholder.setAttribute("src","images/placeholder.gif");
  placeholder.setAttribute("alt","my image gallery");
  var description = document.createElement("p");
  description.setAttribute("id","description");
  var desctext = document.createTextNode("Choose an image");//创建文本节点
  description.appendChild(desctext);
  var gallery = document.getElementById("imagegallery");
  document.getElementsByTagName("body")[0].appendChild(placeholder); // 这样添加 。默认是添加到文档的最后。  
  document.getElementsByTagName("body")[0].appendChild(description); //如果想添加在其他地方， 可以使用 insertBefore()                        
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);


</script>
	<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
  <h1>Snapshots</h1>
  <ul id="imagegallery">
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display">
        <img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
      </a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" >
        <img src="images/thumbnail_coffee.jpg" alt="Coffee" />
      </a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose">
        <img src="images/thumbnail_rose.jpg" alt="Rose" />
      </a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock">
        <img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
      </a>
    </li>
  </ul>
</body>
</html>

china_wanglong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的图片展示例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Image Gallery function showPic(whichpic) { if (!document.getElementById("placeholder")) re
复制链接

扫一扫