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

封装了一个js图片轮换效果的函数

Sep 28 Javascript

ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能

Feb 03 Javascript

js下拉菜单语言选项简单实现

Sep 23 Javascript

根据身份证号自动输出相关信息(籍贯,出身日期,性别)

Nov 15 Javascript

Javascript数组与字典用法分析

Dec 13 Javascript

jQuery验证元素是否为空的两种常用方法

Mar 17 Javascript

Jquery循环截取字符串的方法(多出的字符串处理成"...")

Nov 28 Javascript

利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

Dec 02 Javascript

layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)

Sep 23 Javascript

Node.js中出现未捕获异常的处理方法

Jun 29 Javascript

vue 使用饿了么UI仿写teambition的筛选功能

Mar 01 Vue.js

ECharts transform数据转换和dataZoom在项目中使用

Dec 24 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中的时间显示

2007/01/18 PHP

php csv操作类代码

2009/12/14 PHP

PHP管理依赖(dependency)关系工具 Composer的自动加载（autoload）

2014/08/18 PHP

PHP+JS实现的商品秒杀倒计时用法示例

2016/11/15 PHP

laravel validate 设置为中文的例子(验证提示为中文)

2019/09/29 PHP

js 验证身份证信息有效性

2014/03/28 Javascript

基于jQuery实现复选框的全选全不选反选功能

2014/11/24 Javascript

js带缩略图的图片轮播效果代码分享

2015/09/14 Javascript

使用bootstrap3开发响应式网站

2016/05/12 Javascript

JS模拟实现方法重载示例

2016/08/03 Javascript

jquery 动态增加删除行的简单实例(推荐)

2016/10/12 Javascript

JavaScript实现的微信二维码图片生成器的示例

2016/10/26 Javascript

Angular2搜索和重置按钮过场动画

2017/05/24 Javascript

浅谈jQuery框架Ajax常用选项

2017/07/08 jQuery

Parcel 打包示例(React HelloWorld)

2018/01/16 Javascript

Vue 实现输入框新增搜索历史记录功能

2019/10/15 Javascript

Vue 的 v-model用法实例

2020/11/23 Vue.js

用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化

2015/04/01 Python

Python读写/追加excel文件Demo分享

2018/05/03 Python

对Python捕获控制台输出流的方法详解

2019/01/07 Python

Python语言进阶知识点总结

2019/05/28 Python

基于python实现语音录入识别代码实例

2020/01/17 Python

详解如何用canvas画一个微笑的表情

2019/03/14 HTML / CSS

美国在线印刷公司：PsPrint

2017/10/12 全球购物

为什么要使用servlet

2016/01/17 面试题

学生发电厂实习自我鉴定

2013/09/22 职场文书

医科大学毕业生自荐信

2014/02/03 职场文书

党校毕业心得体会

2014/09/13 职场文书

常务副县长“三严三实”对照检查材料思想汇报

2014/10/05 职场文书

党员干部三严三实心得体会

2014/10/13 职场文书

重阳节慰问信

2015/02/15 职场文书

大学生求职自荐信范文

2015/03/04 职场文书

本科毕业论文致谢词

2015/05/14 职场文书

工资证明范本

2015/06/12 职场文书

Go语言中break label与goto label的区别

2021/04/28 Golang

Golang 实现获取当前函数名称和文件行号等操作

2021/05/08 Golang