CSS+JS构建的图片查看器

时间:2008-10-06 10:42:04  来源:第二电脑网上收集  作者:

  第二电脑网导读:图可查看完全尺寸,兼容性:IE、Firefox 、Opera。JS部分function showPic (whichpic) {  if (document.getElementById) {   document.getElementById('placeholder').src = whichpic.href; if (whichpic.title) {    document.getElementById('desc').childNodes[0].nodeValu...
  正文:

作者站点:www.forest53.com

这是一个使用 Css + JS 构建的简易图片查看器,采用缩略图点击查看大图,可以分别显示每张图片的描述,大图显示位置采用固定宽度和高度,超出部分隐藏,点击大图可查看完全尺寸,兼容性:IE、firefox 、Opera。

JS部分

function showPic (whichpic) {  
if (document.getElementById) {   
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {    
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {    
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}   return false;  
} else {   
return true;  
} }

xhtml

<div id="album">
<div id="pic">
<img src="第一张大图的地址" alt="" id="placeholder" />
</div>
<p id="desc">第一张大图的描述</p>
<div id="thumbs">
<ul>
<li><a onclick="return showPic(this);" href="第一张大图的地址" title="">
<img src="第一张小图的地址" alt="" /></a></li>
.
.
.
</ul>
</div>
</div>

CSS代码见文章末端演示文件下载

现在的效果

因为大图显示位置是固定大小的,但图片每张大小是不一的,所以上面代码运行的结果不是理想的,还要加上点击大图查看完全尺寸的代码,这里采用不错的LightBox效果。

在上面JS代码中加入:

document.getElementById('ShowLightBox').href = whichpic.href;

lightbox需要在A标签里有个大图的地址。.
head区加入lightbox的代码。

在上面的xhtml代码中加入:

<div id="pic"> <a href="第一张大图的地址" rel="lightbox" id="ShowLightBox">
<img src="第一张大图的地址" alt="点击查看完全尺寸" id="placeholder" /></a>
</div>

最终效果

下载整个源码

上传的附件
文件类型: rar160c895d75ad39d28d34223ee11a32ce.rar (341.65 KB)

感谢hooline 和 Lokesh Dhakar

"CSS+JS构建的图片查看器"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/2008-10-06/1822.html


关键字:

关于《CSS+JS构建的图片查看器》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td