编程 Javascript

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 相关文章推荐

谷歌浏览器 insertCell与appendChild的区别

Feb 12 Javascript

extjs 学习笔记（三）最基本的grid

Oct 15 Javascript

面向对象的Javascript之三(封装和信息隐藏)

Jan 27 Javascript

JQuery UI的拖拽功能实现方法小结

Mar 14 Javascript

使用jquery解析XML示例代码

Sep 05 Javascript

Javascript中使用parseInt函数需要注意的问题

Apr 02 Javascript

深入理解MVC中的时间js格式化

May 19 Javascript

javascript中的try catch异常捕获机制用法分析

Dec 14 Javascript

JavaScript 字符串数字左补位，右补位，取固定长度，截位扩展函数代码

Mar 25 Javascript

react-native android状态栏的实现

Jun 15 Javascript

解决vuecli3.0热更新失效的问题

Sep 19 Javascript

关于React Native 无法链接模拟器的问题

Jun 21 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

PHP读取配置文件类实例(可读取ini,yaml,xml等)

2015/07/28 PHP

PHP反射机制原理与用法详解

2017/02/15 PHP

PHP实现类似于C语言的文件读取及解析功能

2017/09/01 PHP

让GoogleCode的SVN下的HTML文件在FireFox下正常显示.

2009/05/25 Javascript

事件模型在各浏览器中存在差异

2010/10/20 Javascript

js绑定事件this指向发生改变的问题解决方法

2013/04/23 Javascript

iframe实用操作锦集

2014/04/22 Javascript

js 实现的可折叠留言板(附源码下载)

2014/07/01 Javascript

jQuery的事件委托实例分析

2015/07/15 Javascript

JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)

2015/11/24 Javascript

Summernote实现图片上传功能的简单方法

2016/07/11 Javascript

微信小程序 MINA文件结构

2016/10/17 Javascript

Bootstrap整体框架之CSS12栅格系统

2016/12/15 Javascript

jQuery制作input提示内容（兼容IE8以上）

2017/07/05 jQuery

关于Vue组件库开发详析

2018/07/01 Javascript

vue中render函数的使用详解

2018/10/12 Javascript

vue-router的两种模式的区别

2019/05/30 Javascript

TypeScript中使用getElementXXX()的示例代码

2019/09/12 Javascript

jQuery实现的上拉刷新功能组件示例

2020/05/01 jQuery

[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20

2020/11/20 DOTA

Python3基础之条件与循环控制实例解析

2014/08/13 Python

详解Python的hasattr() getattr() setattr() 函数使用方法

2018/07/09 Python

python实现两个dict合并与计算操作示例

2019/07/01 Python

Python基于Opencv来快速实现人脸识别过程详解（完整版）

2019/07/11 Python

django之使用celery-把耗时程序放到celery里面执行的方法

2019/07/12 Python

keras 自定义loss损失函数,sample在loss上的加权和metric详解

2020/05/23 Python

Python直接赋值及深浅拷贝原理详解

2020/09/05 Python

python 发送get请求接口详解

2020/11/17 Python

纯CSS3实现圆圈动态发光特效动画的示例代码

2021/03/08 HTML / CSS

Hello Molly美国：女性时尚在线

2019/08/26 全球购物

室内设计专业个人的自我评价

2013/12/18 职场文书

医学专业自荐信

2014/06/14 职场文书

2014年房地产销售工作总结

2014/12/01 职场文书

2014年财政局工作总结

2014/12/09 职场文书

家长通知书家长意见

2015/06/03 职场文书

Python 的 sum() Pythonic 的求和方法详细

2021/10/16 Python