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

Javascript Cookie读写删除操作的函数

Mar 02 Javascript

基于jquery的实现简单的表格中增加或删除下一行

Aug 01 Javascript

JavaScript中如何通过arguments对象实现对象的重载

May 12 Javascript

js锁屏解屏通过对$.ajax进行封装实现

Jul 31 Javascript

js实现简单div拖拽功能实例

May 12 Javascript

Bootstrap实现圆角、圆形头像和响应式图片

Dec 14 Javascript

详解微信小程序通过控制CSS实现view隐藏与显示

May 24 Javascript

JavaScript设计模式之代理模式详解

Jun 09 Javascript

React教程之封装一个Portal可复用组件的方法

Jan 02 Javascript

详解Angular6.0使用路由步骤(共7步)

Jun 29 Javascript

JavaScript中的函数申明、函数表达式、箭头函数

Dec 06 Javascript

Vue3 响应式侦听与计算的实现

Nov 11 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

dedecms中显示数字验证码的修改方法

2007/03/21 PHP

PHP最常用的ini函数分析针对PHP.ini配置文件

2010/04/22 PHP

php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系

2011/11/02 PHP

解析PHP无限级分类方法及代码

2013/06/21 PHP

php fsockopen解决办法 php实现多线程

2014/01/20 PHP

PHP开发中AJAX技术的简单应用

2015/12/11 PHP

PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面

2016/03/21 PHP

php探针不显示内存解决方法

2019/09/17 PHP

PHP使用phpunit进行单元测试示例

2019/09/23 PHP

PHP Swoole异步读取、写入文件操作示例

2019/10/24 PHP

基于jQuery的固定表格头部的代码(IE6,7,8测试通过)

2010/05/18 Javascript

JavaScript单元测试ABC

2012/04/12 Javascript

Javscript删除数组中指定元素并返回新数组

2014/03/06 Javascript

javascript中setInterval的用法

2015/07/19 Javascript

AngularJS控制器controller正确的通信的方法

2016/01/25 Javascript

基于javascript数组实现图片轮播

2016/05/02 Javascript

jQuery实现遍历复选框的方法示例

2017/03/06 Javascript

jQuery ajax读取本地json文件的实例

2017/10/31 jQuery

vuex直接赋值的三种方法总结

2018/09/16 Javascript

Ajax获取node服务器数据的完整步骤

2020/09/20 Javascript

Vue使用v-viewer实现图片预览

2020/10/21 Javascript

[59:00]DOTA2-DPC中国联赛正赛 Ehome vs PSG.LGD BO3 第一场 3月7日

2021/03/11 DOTA

Linux下Python获取IP地址的代码

2014/11/30 Python

Python2.7.10以上pip更新及其他包的安装教程

2018/06/12 Python

基于Python+Appium实现京东双十一自动领金币功能

2019/10/31 Python

Pycharm 2020年最新激活码（亲测有效）

2020/09/18 Python

Python JSON编解码方式原理详解

2020/01/20 Python

解决springboot yml配置 logging.level 报错问题

2020/02/21 Python

Python解释器及PyCharm工具安装过程

2020/02/26 Python

HTML5 视频播放(video),JavaScript控制视频的实例代码

2018/10/08 HTML / CSS

Jabra捷波朗美国官网：用于办公、车载和运动的无线蓝牙耳麦

2017/02/01 全球购物

乐天旅游香港网站：日本饭店预订

2017/11/29 全球购物

老板电器官方购物商城：老板油烟机、燃气灶、消毒柜、电烤箱

2018/05/30 全球购物

PHP引擎php.ini参数优化深入讲解

2021/03/24 PHP

房屋租赁意向书

2014/04/01 职场文书

2014年绿化工作总结

2014/12/09 职场文书