CSS+JS构建的图片查看器


Posted in Javascript onJuly 22, 2006

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

Javascript 相关文章推荐
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
Vue.js动态组件解析
Sep 09 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
详解javascript中的Error对象
Apr 25 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 Javascript
常用参考资料(手册)下载或者链接
Jul 22 #Javascript
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 #Javascript
用于table内容排序
Jul 21 #Javascript
脚本收藏iframe
Jul 21 #Javascript
document.all还是document.getElementsByName?
Jul 21 #Javascript
关于IFRAME 自适应高度的研究
Jul 20 #Javascript
怎么用javascript进行拖拽
Jul 20 #Javascript
You might like
Cannot modify header information错误解决方法
2008/10/08 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
深入理解js promise chain
2016/05/05 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
python字典的值可以修改吗
2020/06/29 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
美化环境标语
2014/06/20 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
2015年党员自评材料
2014/12/17 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android