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 相关文章推荐
javascript XML数据显示为HTML一例
Dec 23 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
vue的mixins属性详解
Mar 14 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
常用参考资料(手册)下载或者链接
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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
js数组操作学习总结
2013/11/04 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
Koa 中的错误处理解析
2019/04/09 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
python打开使用的方法
2019/09/30 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
高分子材料与工程专业推荐信
2013/12/01 职场文书
幼儿教育感言
2014/02/05 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
2014年招生工作总结
2014/11/26 职场文书
新娘婚礼致辞
2015/07/27 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
外出学习心得体会范文
2016/01/18 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
go goroutine 怎样进行错误处理
2021/07/16 Golang
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏