本示例使用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>
相关推荐
本示例使用Jquery的ColorBox插件弹出图片组浏览层,点击会弹出页中窗的效果同时带有关闭及上一个下一个的切换,个人感觉相当不错的弹出窗,感兴趣的你可不要错过了哈
jquery colorbox弹出层插件制作图片弹出显示代码
jquery-colorbox jquery-colorbox jquery-colorbox
jquery colorbox 弹出窗口 插件 支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架。 通过CSS 控制外观,使用用户可以很容易重新定制外观。 不需要更改 ColorBox 的 javascript 文件就可以重新设定其行为。 ...
强大的JQUERY COLORBOX, 一个条代码就可以实现弹窗,CSS多样化,支持所有浏览器
ColorBox是一个基于jQuery 1.3 的轻量级,自定义灯箱插件,功能非常强大,支持图片,图片组,ajax,inline和iframed内容,灯箱样式完全由用户控制,可自定义CSS样式,不需要改写ColorBox库文件就能重写展示效果设置...
JQuery ColorBox javascript
jquery + colorbox 真实项目中的成熟使用案例 由于代码是自己写的 , 所以注释很全 思路清晰 , 希望对要使用该插件的朋友们 给予帮助 O(∩_∩)O~
Colorbox - a jQuery lightbox A lightweight customizable lightbox plugin for jQuery
jquery.colorbox-min.js
Colorbox弹出层插件使用API与中文教程 教程
弹出窗口
弹出页面的效果,看了效果,给人很舒服的感觉
弹出层,遮罩,对话框
colorbox-jquery特效,主要就是一些弹出层,图片等的一些操作……很具有视觉冲击力……
jquery Fancybox colorbox DOM Window shadowbox 及使用说明
ColorBox是一个基于jQuery 1.3 的轻量级,自定义灯箱插件,功能非常强大,支持图片,图片组,ajax,inline和iframed内容,灯箱样式完全由用户控制,可自定义CSS样 式,不需要改写ColorBox库文件就能重写展示效果设置...
一款效果不错,可以自行开发样式的jquery弹出框插件。