首页 > 其他 > 详细

图片库改进版

时间:2014-04-14 06:27:21      阅读:501      评论:0      收藏:0      [点我收藏+]
bubuko.com,布布扣
<!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>
<style type="text/css">
ul,li{ list-style:none;}
ul li{ line-height:24px; float:left; padding:1em;}
img{ display:block; clear:both;}
</style>
</head>

<body>
<h1>Snapshots</h1>
<ul id=‘imagegallery‘>
    <li><a href="images/1.jpg"  title="pic01111">第一张图片</a></li>
    <li><a href="images/2.jpg"  title="pic02222">第二张图片</a></li>
    <li><a href="images/3.jpg" title="pic03333">第三张图片</a></li>
    <li><a href="images/4.jpg" title="pic04444">第四张图片</a></li>
</ul>
<img id=‘placeholder‘ alt=‘My Image Gallery‘  src="images/placeholder.gif"/>
<p  id="description">Choose an image</p>
<script>
window.onload=prepareGallery;
function prepareGallery(){
    if(!document.getElementById ) return false;
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById(imagegallery)) return false;
    var gallery=document.getElementById(imagegallery);
    var links=gallery.getElementsByTagName(a);
    for(var i=0;i<links.length;i++){
        links[i].onclick=function(){
            showpic(this); return !showpic(this);
            return false; 
        }
    }
}

function showpic(whichpic){
    if( !document.getElementById(placeholder)) return false;
    var placeholder=document.getElementById(placeholder);
if(placeholder.nodeName!=‘IMG‘) return false; //*******nodeName属性总是返回一个大写字母的值,即使元素在HTML文档里是小写字母。 placeholder.setAttribute(
src,whichpic.getAttribute(href)); if(document.getElementById(description)){ var text=whichpic.getAttribute(title)?whichpic.getAttribute(‘title‘):‘ ‘; //三元操作符 var description=document.getElementById(description);
if(description.firstChild.nodeType==3){ description.firstChild.nodeValue
=text;
} }
return true; }
</script> </body> </html>
bubuko.com,布布扣

红色javascript代码部分是为了考虑向后兼容性而写!也不要做太多的假设!

 

return !showpic(this);

 解析:此代码主要是解决当showpic函数里placeholder不存在的时候(代码就会返回false.也就导致了默认链接不可点击)

            showpic()里应该是如果图片交换成功,return true; 如果不成功,返回false;

           所以!showpic()为false的时候默认链接不可点击就对了 

图片库改进版,布布扣,bubuko.com

图片库改进版

原文:http://www.cnblogs.com/positive/p/3662533.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!