编程 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时间函数基础介绍

Mar 28 Javascript

写JQuery插件的基本知识

Nov 25 Javascript

Javascript的表单与验证-非空验证

Mar 18 Javascript

javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)

Sep 20 Javascript

Ajax 加载数据练习代码

Jan 05 Javascript

jquery.form.js异步提交表单详解

Apr 25 jQuery

vue实现点击图片放大效果

Aug 15 Javascript

解决微信小程序中的滚动穿透问题

Sep 16 Javascript

微信内置开发 iOS修改键盘换行为搜索的解决方案

Nov 06 Javascript

解决vue cli4升级sass-loader(v8)后报错问题

Jul 30 Javascript

angular *Ngif else用法详解

Dec 15 Javascript

在HTML中使用JavaScript的两种方法

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

ThinkPHP后台首页index使用frameset时的注意事项分析

2014/08/22 PHP

javascript some()函数用法详解

2014/11/13 PHP

Yii框架连表查询操作示例

2019/09/06 PHP

PHP-FPM 设置多pool及配置文件重写操作示例

2019/10/02 PHP

phpstudy隐藏index.php的方法

2020/09/21 PHP

js动画效果制件让图片组成动画代码分享

2014/01/14 Javascript

JavaScript中的条件判断语句使用详解

2015/06/03 Javascript

深入探究使JavaScript动画流畅的一些方法

2015/06/30 Javascript

JavaScript中循环遍历Array与Map的方法小结

2016/03/12 Javascript

JS集成fckeditor及判断内容是否为空的方法

2016/05/27 Javascript

Javascript实现汉字和拼音互转的终极方案

2016/10/19 Javascript

简单实现node.js图片上传

2016/12/18 Javascript

Bootstrap Table使用整理（三）

2017/06/09 Javascript

vue-quill-editor实现图片上传功能

2017/08/08 Javascript

微信小程序tabBar模板用法实例分析【附demo源码下载】

2017/11/28 Javascript

使用javascript做在线算法编程

2018/05/25 Javascript

mpvue写一个CPASS小程序的示例

2018/09/04 Javascript

微信小程序实现工作时间段选择

2019/02/15 Javascript

layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)

2019/09/24 Javascript

[02:47]DOTA2英雄基础教程野性怒吼兽王

2013/12/05 DOTA

[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

同时安装Python2 & Python3 cmd下版本自由选择的方法

2017/12/09 Python

python实现图像全景拼接

2020/03/27 Python

python飞机大战游戏实例讲解

2020/12/04 Python

html5使用canvas实现图片下载功能的示例代码

2017/08/26 HTML / CSS

HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例

2016/02/28 HTML / CSS

联想阿根廷官方网站：Lenovo Argentina

2019/10/14 全球购物

阿里巴巴美国：Alibaba美国

2019/11/24 全球购物

Python使用openpyxl复制整张sheet

2021/03/24 Python

专科应届生求职信

2013/11/24 职场文书

文明村镇申报材料

2014/05/06 职场文书

如何写股份合作协议书

2014/09/11 职场文书

2014年企业党支部工作总结

2014/12/04 职场文书

2015年纪念“卢沟桥事变”78周年活动方案

2015/05/06 职场文书

民事辩护词范文

2015/05/21 职场文书

java.util.NoSuchElementException原因及两种解决方法

2022/06/28 Java/Android