color Box 介绍
Color Box 可以播放单张 图片 ，组 图片 ，视频，打开新html，内嵌iframe，甚至html 标签 等，注意它是弹出层 插件 ，不是用于基本 页面 展示的。而且一次只能弹出 一个 ，新弹框复用以前的弹框，弹出层再弹出层是没有的。?
Color Box 集弹出层、 幻灯片 播放 功能 于一身，不仅于此，它还 支持 其它的 内容 格式：例如html,flash,iframe等，这些 内容 的 显示 方式都是Ajax的。
更难能可贵的是，在压缩后它只有10K的大小，使用这款 插件 不会给你的网页带来过多的负担，而且还能实现很棒的视觉 效果 ，为 用户 体验增色不少。
而且可以更加自己的喜好， 修改 color Box 弹出框的样式，非常灵活。
1、引入jquery核心库和Color Box 脚本 文件 ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="color Box /jquery.color Box .js"></script>
2、引入Color Box 样式表 文件 ，注意引入不同皮肤的css 文件 将实现不同的皮肤?
<link media="screen" rel="stylesheet" href="color Box .css" />
3、 HTML代码 ?
<h2>弹性 效果 </h2>
<p>
<a href="content/ohoopee1.jpg"rel="example1" title="Me and my">GroupedPhoto1</a>
</p>
<p>
<a href="content/ohoopee2.jpg"rel="example1" title="On the Ohoopee">Grouped Photo 2</a>
</p>
<p>
<a href="content/ohoopee3.jpg"rel="example1" title="On the Ohoopee">Grouped Photo 3</a>
</p>
<h2>淡入淡出 效果 </h2>
<p>
<a href="content/ohoopee1.jpg"rel="example2" title="Me and my">Grouped Photo 1</a>
</p>
<p>
<a href="content/ohoopee2.jpg"rel="example2" title="On the">Grouped Photo 2</a>
</p>
<p>
<a href="content/ohoopee3.jpg"rel="example2" title="On the Ohoopee">Grouped Photo 3</a>
</p>
<h2>没有动画 效果 ，高度固定（屏幕大小的75%）</h2>
<p>
<a href="content/ohoopee1.jpg"rel="example3" title="Me and my">Grouped Photo 1</a>
</p>
<p>
<a href="content/ohoopee2.jpg"rel="example3" title="On the">Grouped Photo 2</a>
</p>
<p>
<a href="content/ohoopee3.jpg"rel="example3" title="On the Ohoopee">Grouped Photo 3</a>
</p>
<h2> 自动 播放</h2>
<p>
<a href="content/ohoopee1.jpg"rel="example4" title="Me">Grouped Photo 1</a>
</p>
<p>
<a href="content/ohoopee2.jpg"rel="example4" title="On the Ohoopee">Grouped Photo 2</a>
</p>
<p>
<a href="content/ohoopee3.jpg"rel="example4" title="On">Grouped Photo 3</a>
</p>
4、jquery初始化 代码 ?
$(document).ready(function() {
//Examples of how to assign the Color Box event to elements
$(".group1").color Box ({
rel: 'group1'
});
$(".group2").color Box ({
rel: 'group2',
transition: "fade"
});
$(".group3").color Box ({
rel: 'group3',
transition: "none",
width: "75%",
height: "75%"
});
$(".group4").color Box ({
rel: 'group4',
slideshow: true
});
$(".ajax").color Box ();
$(".youtube").color Box ({
iframe: true,
innerWidth: 640,
innerHeight: 390
});
$(".vimeo").color Box ({
iframe: true,
innerWidth: 500,
innerHeight: 409
});
$(".iframe").color Box ({
iframe: true,
width: "80%",
height: "80%"
});
$(".inline").color Box ({
inline: true,
width: "50%"
});
$(".callbacks").color Box ({
o nop en: function() {
alert('o nop en: color Box is about to open');
},
onLoad: function() {
alert('onLoad: color Box has started to load the targeted content');
},
onComplete: function() {
alert('onComplete: color Box has dis played the loaded content');
},
onCleanup: function() {
alert('onCleanup: color Box has begun the close process');
},
onClosed: function() {
alert('onClosed: color Box has completely closed');
}
});
$('.non-retina').color Box ({
rel: 'group5',
transition: 'none'
}) $('.retina').color Box ({
rel: 'group5',
transition: 'none',
retin aim age: true,
retinaUrl: true
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function() {
$('#click').css({
"background-color": "#f00",
"color": "#fff",
"cursor": "inherit"
}).text("Open this window again and this message will still be here.");
return false;
});
});
网站地址 : http://www.jacklmoore.com/colorbox/
GitHub: https://github.com/jackmoore/colorbox
网站描述: jquery弹出层 插件
colorbox官方网站
官方网站： http://www.jacklmoore.com/colorbox/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。