ThickBox学习之一 ThickBox介绍以及单图片显示示例
2006-12-24 22:42
309 查看
ThickBox是一个基于JQuery类库的扩展,它能在浏览器界面上显示非常棒的UI框, 它可以显示单图片,多图片,ajax请求内容或链接内容。官方网站的废话很多,但我在这里只是略带过,如果要想实现效果,那你需要 下载JQuery 的js文件,以及ThickBox的js文件 和ThickBox的CSS文件,好,准备工作开始了,我们就来玩一玩这个。
第一步:新建工程,并把刚才下载好的2个js文件和CSS文件放入到工程里,并在页面引用。
第二步:引用完后把这个图片添加到你的工程,
然后打开ThickBox js文件,搜索 loadingAnimation.gif,这个就是图片的存储地址,你把它改为自己的相应目录地址就可以。
第三步:在html页面上添加一个链接,<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="images/single_t.jpg" alt="Single Image"/></a>
记住,在链接的class里面引用的是thickbox,然后你就可以试一下效果了。非常棒哦!如果实现这样的效果没有这两个js类库辅助,那你需要敲很多代码,并且使用js要非常溜才行,这样的类库,最适合我不过啦~
在官网还有几个示例,今天没时间一次性写出来,我会接下来写,希望这些对新人们有用。
平安夜了,也祝朋友们圣诞快乐~
第一步:新建工程,并把刚才下载好的2个js文件和CSS文件放入到工程里,并在页面引用。
第二步:引用完后把这个图片添加到你的工程,
然后打开ThickBox js文件,搜索 loadingAnimation.gif,这个就是图片的存储地址,你把它改为自己的相应目录地址就可以。
第三步:在html页面上添加一个链接,<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="images/single_t.jpg" alt="Single Image"/></a>
记住,在链接的class里面引用的是thickbox,然后你就可以试一下效果了。非常棒哦!如果实现这样的效果没有这两个js类库辅助,那你需要敲很多代码,并且使用js要非常溜才行,这样的类库,最适合我不过啦~
在官网还有几个示例,今天没时间一次性写出来,我会接下来写,希望这些对新人们有用。
平安夜了,也祝朋友们圣诞快乐~
相关文章推荐
- ActionScript 3.0 学习(五) AS3 Losder加载图片以及显示对象遮罩介绍
- 从零开始学习Node.js系列教程三:图片上传和显示方法示例
- 多线程学习-ListenableFuture使用介绍以及示例
- ibatis学习(一)--ibatis介绍以及示例
- php获取文件夹路径内的图片以及分页显示示例
- OpenCV学习第一篇:开发环境搭建以及显示电脑中的图片
- php获取文件夹路径内的图片以及分页显示示例
- Control Study->AdRotator广告控件显示自定义配置文件中广告以及与DataGrid控件结合使用显示图片(示例代码下载)
- Control Study->AdRotator广告控件显示自定义配置文件中广告以及与DataGrid控件结合使用显示图片(示例代码下载)
- 新手学习之点击gridview切换图片,以及图片的显示和隐藏
- Control Study->AdRotator广告控件显示自定义配置文件中广告以及与DataGrid控件结合使用显示图片(示例代码下载)
- 关于《.net中多个图片并排循环排列显示的问题》[WEB学习示例]
- 多线程学习-ListenableFuture使用介绍以及示例
- OpenCV学习(一):图片的读取显示以及鼠标点击事件的设置
- Control Study->AdRotator广告控件显示自定义配置文件中广告以及与DataGrid控件结合使用显示图片(示例代码下载)
- 多线程学习-ListenableFuture使用介绍以及示例
- opencv学习之四:rgb通道的分离以及直方图的显示计算
- 上传后立即显示图片以及urldecode
- 安卓学习之使用listview设置adapter时,解决动态显示图片的问题
- ibatis学习(一)--ibatis介绍以及用例 [转]