编程 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（笔记）

Oct 06 Javascript

jQuery 点击图片跳转上一张或下一张功能的实现代码

Mar 12 Javascript

在jQuery中常用的选择器介绍

Apr 16 Javascript

jQuery防止click双击多次提交及传递动态函数或多参数

Apr 02 Javascript

new Date()问题在ie8下面的处理方法

Jul 31 Javascript

express的中间件basicAuth详解

Dec 04 Javascript

javascript使用prototype完成单继承

Dec 24 Javascript

js实现接收表单的值并将值拼在表单action后面的方法

Nov 23 Javascript

js实现分割上传大文件

Mar 09 Javascript

Javascript的比较汇总

Jul 25 Javascript

基于chosen插件实现人员选择树搜索自动筛选功能

Sep 24 Javascript

vue-cli3配置与跨域处理方法

Aug 17 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的memory_limit限制的方法分享

2012/02/21 PHP

优化PHP程序的方法小结

2012/02/23 PHP

ThinkPHP在Cli模式下使用模板引擎的方法

2015/09/25 PHP

php中删除、清空session的方式总结

2015/10/09 PHP

Yii2创建多界面主题(Theme)的方法

2016/10/08 PHP

CentOS 上搭建 PHP7 开发测试环境

2017/02/26 PHP

javascript 写类方式之八

2009/07/05 Javascript

简单实用的全选反选按钮例子

2013/10/18 Javascript

js对图片base64编码字符串进行解码并输出图像示例

2014/03/17 Javascript

一个小例子解释如何来阻止Jquery事件冒泡

2014/07/17 Javascript

jQuery三级下拉列表导航菜单代码分享

2020/04/15 Javascript

详解JS中的attribute属性

2017/04/25 Javascript

深入理解vue-router之keep-alive

2017/08/31 Javascript

node.js中http模块和url模块的简单介绍

2017/10/06 Javascript

vue项目实现记住密码到cookie功能示例(附源码)

2018/01/31 Javascript

Vue.js组件间通信方式总结【推荐】

2018/11/23 Javascript

微信小程序引入VANT组件的方法步骤

2019/09/19 Javascript

[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报

2015/05/27 DOTA

Python中使用Flask、MongoDB搭建简易图片服务器

2015/02/04 Python

Python迭代器和生成器介绍

2015/03/06 Python

Django中URLconf和include()的协同工作方法

2015/07/20 Python

python中异常捕获方法详解

2017/03/03 Python

Python只用40行代码编写的计算器实例

2017/05/10 Python

Python金融数据可视化汇总

2017/11/17 Python

Python数据抓取爬虫代理防封IP方法

2018/12/23 Python

python使用matplotlib画柱状图、散点图

2019/03/18 Python

使用keras实现densenet和Xception的模型融合

2020/05/23 Python

Python中猜拳游戏与猜筛子游戏的实现方法

2020/09/04 Python

详解python3 GUI刷屏器(附源码)

2021/02/18 Python

八一建军节部队活动方案

2014/02/04 职场文书

无偿献血倡议书

2014/04/14 职场文书

世博会口号

2014/06/20 职场文书

焦裕禄观后感

2015/06/03 职场文书

开学第一周值周总结

2015/07/16 职场文书

优秀家长事迹材料（2016推荐版）

2016/02/29 职场文书

2019年描写人生经典诗句大全

2019/07/08 职场文书