CSS+JS构建的图片查看器

来源:http://www.sh-fengwen.com 作者: 营养排行 人气:72 发布时间:2019-09-07
摘要:这是一个使用 CSS + JS构建的简易图片查看器,采用缩略图点击查看大图,可以分别显示每张图片的描述,大图显示位置采用固定宽度和高度,超出部分隐藏,点击大图可查看完全尺寸,

这是一个使用 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>

最终效果

全部演示文件下载

感谢hooline 和 Lokesh Dhakar

CSS + JS 构建的简易图片查看器,采用缩略图点击查看大图,可以分别显示每张图片的描述,大图显示位置采用固定宽度和高度...

本文由美高梅游戏平台网站发布于 营养排行,转载请注明出处:CSS+JS构建的图片查看器

关键词:

频道精选

最火资讯