jquery使用ColorBox弹出图片组浏览层实例演示


Posted in Javascript onMarch 14, 2013

本示例使用Jquery的ColorBox插件弹出图片组浏览层。效果预览网址:http://www.keleyi.com/keleyi/phtml/colorbox/

以下是本效果的完整代码,将以下代码保存到html文件,打开即可预览效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>使用ColorBox弹出图片组浏览层</title> 
<link rel="stylesheet" href="http://www.keleyi.com/keleyi/phtml/colorbox/colorbox.css" /> 
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="http://www.keleyi.com/keleyi/phtml/colorbox/jquery.colorbox-min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".keleyi_com").colorbox({ rel: 'group1', transition: "none", innerWidth: '700px' }); 
}); 
</script> 
</head> 
<body> 
<div style="width:400px;margin-left:auto;margin-right:auto;"> 
请点击下面链接,即可在弹出层显示图片组。 
<p><a class="keleyi_com" href="http://www.keleyi.com/keleyi/phtml/picnext/images/k02.jpg" title="菊花">图片一</a></p> 
<p><a class="keleyi_com" href="http://www.keleyi.com/keleyi/phtml/picnext/images/k03.jpg" title="开心">图片二</a></p> 
<p><a class="keleyi_com" href="http://www.keleyi.com/keleyi/phtml/picnext/images/k05.jpg" title="宋慧乔">图片三</a></p> 
<p><a class="keleyi_com" href="http://www.keleyi.com/keleyi/phtml/picqiehuan/p3.jpg" title="梦想">图片四</a></p> 
</div></body> 
</html>
Javascript 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
javascript call方法使用说明
Jan 11 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
详解jQuery事件
Jan 13 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
JavaScript 函数replace深入了解
Mar 14 #Javascript
JS异常处理的一个想法(sofish)
Mar 14 #Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 #Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 #Javascript
document.createElement()用法
Mar 13 #Javascript
js获得鼠标的坐标值的方法
Mar 13 #Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 #Javascript
You might like
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
php中取得文件的后缀名?
2012/02/20 PHP
php生成QRcode实例
2014/09/22 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
JavaScript实现旋转轮播图
2020/08/18 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
python冒泡排序简单实现方法
2015/07/09 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python实现带百分比的进度条
2016/06/28 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python 文件操作删除某行的实例
2017/09/04 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Django学习之文件上传与下载
2019/10/06 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
台湾三立电视电商平台:电电购
2019/09/09 全球购物
大学生个人简历自我评价
2013/11/16 职场文书
少年闰土教学反思
2014/02/22 职场文书
《落花生》教学反思
2014/02/25 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书