编程 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 创建书签小工具之理论

Feb 25 Javascript

JQuery设置获取下拉菜单某个选项的值(比较全)

Aug 05 Javascript

解决JS无法调用Controller问题的方法

Dec 31 Javascript

浅谈几种常用的JS类定义方法

Jun 08 Javascript

JavaScript的for循环中嵌套一个点击事件的问题解决

Mar 03 Javascript

JS中SetTimeout和SetInterval使用初探

Mar 23 Javascript

原生JS+Canvas实现五子棋游戏

May 28 Javascript

利用express启动一个server服务的方法

Sep 17 Javascript

vue 实现axios拦截、页面跳转和token 验证

Jul 17 Javascript

js中的深浅拷贝问题简析

May 10 Javascript

详解JavaScript 浮点数运算的精度问题

Jul 23 Javascript

Vue全局使用less样式,组件使用全局样式文件中定义的变量操作

Oct 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 实用代码收集

2010/01/22 PHP

PHP set_error_handler()函数使用详解（示例）

2013/11/12 PHP

CodeIgniter开发实现支付宝接口调用的方法示例

2016/11/14 PHP

Yii框架实现的验证码、登录及退出功能示例

2017/05/20 PHP

php工具型代码之印章抠图

2018/07/18 PHP

PHP获取php,mysql,apche的版本信息及更多服务器信息

2021/03/09 PHP

JavaScript 实现模态对话框源代码大全

2009/05/02 Javascript

javascript Array.remove() 数组删除

2009/08/06 Javascript

在chrome中window.onload事件的一些问题

2010/03/01 Javascript

js中关于String对象的replace使用详解

2011/05/24 Javascript

jtable列中自定义button示例代码

2013/11/21 Javascript

Yii2使用Bootbox插件实现自定义弹窗

2015/04/02 Javascript

js实现文字截断功能

2016/09/14 Javascript

BootStrap表单控件之文本域textarea

2017/05/23 Javascript

详解plotly.js 绘图库入门使用教程

2018/02/23 Javascript

angular5 子组件监听父组件传入值的变化方法

2018/09/30 Javascript

Vue + element 实现多选框组并保存已选id集合的示例代码

2020/06/03 Javascript

[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局

2016/03/03 DOTA

[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26

2018/08/30 DOTA

python计算文本文件行数的方法

2015/07/06 Python

python学习之编写查询ip程序

2016/02/27 Python

实例讲解python中的协程

2018/10/08 Python

python中的单引号双引号区别知识点总结

2019/06/23 Python

python基于Selenium的web自动化框架

2019/07/14 Python

pytorch GAN生成对抗网络实例

2020/01/10 Python

使用python采集Excel表中某一格数据

2020/05/14 Python

Myholidays美国：在线旅游网站

2019/08/16 全球购物

同学聚会主持词

2014/03/18 职场文书

员工入职担保书范文

2014/04/01 职场文书

专科应届毕业生求职信

2014/06/04 职场文书

妈妈活动方案

2014/08/15 职场文书

学校拾金不昧表扬信

2015/01/16 职场文书

会议邀请函

2015/01/30 职场文书

离职信范文

2015/06/23 职场文书

2016新党章学习心得体会

2016/01/15 职场文书

PYTHON使用Matplotlib去实现各种条形图的绘制

2022/03/22 Python