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

CSS+JS构建的图片查看器" target="_blank">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



相关阅读:
关于session在PHP5的配置文件中的详细设置参数说明
LINUX系统一个网卡绑定多个IP的方法
解决ASM无法启动问题
JavaScript null和undefined区别分析
SQL中DATALENGTH 用法
如何在 FreeBSD 上使用 UPS
Js倒计时代码,当鼠标离开页面与回到页面会自动停止与开始
MySQL数据库中分组统计的问题
ASP3.0高级编程(二)
jQuery实现原理的模拟代码 -6 代码下载
两难的选择:充满Trick的CSS
让IE6、IE7、IE8支持CSS3的脚本
Microsoft SQL Server 2008 Express版本
JSP由浅入深(6)—— JSP声明
快速导航

Copyright © 2016 phpStudy |