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

html文档中的location对象属性理解及常见的用法

Aug 13 Javascript

javascript实现点击商品列表checkbox实时统计金额的方法

May 15 Javascript

Bootstrap Fileinput文件上传组件用法详解

May 10 Javascript

jQuery使用正则表达式限制文本框只能输入数字

Jun 18 Javascript

响应式表格之固定表头的简单实现

Aug 26 Javascript

bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）

Dec 01 Javascript

Bootstrap表单简单实现代码

Mar 06 Javascript

jQuery实现表格奇偶行显示不同背景色就这么简单

Mar 13 Javascript

ES6学习教程之对象字面量详解

Oct 09 Javascript

axios 处理 302 状态码的解决方法

Apr 10 Javascript

基于jsbarcode 生成条形码并将生成的条码保存至本地+源码

Apr 27 Javascript

详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)

Nov 27 Vue.js

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

c#中的实现php中的preg_replace

2009/12/21 PHP

图解找出PHP配置文件php.ini的路径的方法

2014/08/20 PHP

php cookie中点号（句号）自动转为下划线问题

2014/10/21 PHP

PHP实现懒加载的方法

2015/03/07 PHP

最新制作ThinkPHP3.2.3完全开发手册

2015/11/23 PHP

解决laravel groupBy 对查询结果进行分组出现的问题

2019/10/09 PHP

基于jQuery的一个扩展form序列化到json对象

2010/12/09 Javascript

固定背景实现的背景滚动特效示例分享

2013/05/19 Javascript

js动态创建、删除表格示例代码

2013/08/07 Javascript

jquery实现省市select下拉框的替换(示例代码)

2014/02/22 Javascript

jquery控制表单输入框显示默认值的方法

2015/05/22 Javascript

javascript函数自动执行常用方法汇总

2016/03/28 Javascript

jQuery EasyUI框架中的Datagrid数据表格组件结构详解

2016/06/09 Javascript

Vue是怎么渲染template内的标签内容的

2020/06/05 Javascript

Vue-cli4 配置 element-ui 按需引入操作

2020/09/11 Javascript

[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda

2014/05/22 DOTA

web.py中调用文件夹内模板的方法

2014/08/26 Python

Python中datetime常用时间处理方法

2015/06/15 Python

Python实现多线程HTTP下载器示例

2017/02/11 Python

浅谈用VSCode写python的正确姿势

2017/12/16 Python

CentOS 7下安装Python3.6 及遇到的问题小结

2018/11/08 Python

python使用pygame框架实现推箱子游戏

2018/11/20 Python

用Anaconda安装本地python包的方法及路径问题(图文)

2019/07/16 Python

django如何自己创建一个中间件

2019/07/24 Python

django中使用POST方法获取POST数据

2019/08/20 Python

python3从网络摄像机解析mjpeg http流的示例

2020/11/13 Python

毕业生求职推荐信

2013/11/04 职场文书

记帐员岗位责任制

2014/02/08 职场文书

先进个人总结范文

2015/02/15 职场文书

2015年司机年终工作总结

2015/05/14 职场文书

2016年社区中秋节活动总结

2016/04/05 职场文书

Ajax是什么？Ajax高级用法之Axios技术

2021/04/21 Javascript

tensorflow+k-means聚类简单实现猫狗图像分类的方法

2021/04/28 Python

Python 流媒体播放器的实现(基于VLC)

2021/04/28 Python

Python基础之元组与文件知识总结

2021/05/19 Python

微信告警的zabbix监控系统监控整个NGINX集群

2022/04/18 Servers