jQuery图片播放插件ColorBox使用方法
昨天给大家介绍了一款功能很强大的jquery图片播放插件Fancybox,今天虽然比较晚了,但笔者依然有冲动要继续给大家介绍一款好用的jquery图片播放插件ColorBox,希望对大家平时的Web编程有所帮助。
ColorBox插件的项目主页地址:http://colorpowered.com/colorbox/
最新版本ColorBox插件下载地址:http://colorpowered.com/colorbox/latest
ColorBox插件演示地址,这里ColorBox提供了5种漂亮的皮肤,大家可以分别去看看各种皮肤的demo
皮肤一演示地址:http://colorpowered.com/colorbox/core/example1/index.html
皮肤二演示地址:http://colorpowered.com/colorbox/core/example2/index.html
皮肤三演示地址:http://colorpowered.com/colorbox/core/example3/index.html
皮肤四演示地址:http://colorpowered.com/colorbox/core/example4/index.html
皮肤五演示地址:http://colorpowered.com/colorbox/core/example5/index.html
这个插件一个最大的特点就是“小”,整个js脚本才10KB,看了上面的演示你可能无法相信如此强大的东西才10KB,但我不得不告诉你,没错,它就是这么强悍。
下面就简单来讲讲ColorBox的使用方法。
1、引入jquery核心库和ColorBox脚本文件
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script src="../colorbox/jquery.colorbox.js"></script>
2、引入ColorBox样式表文件,注意引入不同皮肤的css文件将实现不同的皮肤
<link media="screen" rel="stylesheet" href="colorbox.css" />
3、html代码
<h2>弹性效果</h2><p><ahref="../content/ohoopee1.jpg"rel="example1"title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p><p><ahref="../content/ohoopee2.jpg"rel="example1"title="On the Ohoopee as a child">Grouped Photo 2</a></p><p><ahref="../content/ohoopee3.jpg"rel="example1"title="On the Ohoopee as an adult">Grouped Photo 3</a></p> <h2>淡入淡出效果</h2><p><ahref="../content/ohoopee1.jpg"rel="example2"title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p><p><ahref="../content/ohoopee2.jpg"rel="example2"title="On the Ohoopee as a child">Grouped Photo 2</a></p><p><ahref="../content/ohoopee3.jpg"rel="example2"title="On the Ohoopee as an adult">Grouped Photo 3</a></p> <h2>没有动画效果,高度固定(屏幕大小的75%)</h2><p><ahref="../content/ohoopee1.jpg"rel="example3"title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p><p><ahref="../content/ohoopee2.jpg"rel="example3"title="On the Ohoopee as a child">Grouped Photo 2</a></p><p><ahref="../content/ohoopee3.jpg"rel="example3"title="On the Ohoopee as an adult">Grouped Photo 3</a></p> <h2>自动播放</h2><p><ahref="../content/ohoopee1.jpg"rel="example4"title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p><p><ahref="../content/ohoopee2.jpg"rel="example4"title="On the Ohoopee as a child">Grouped Photo 2</a></p><p><ahref="../content/ohoopee3.jpg"rel="example4"title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
4、jquery初始化代码
$(document).ready(function(){//Examples of how to assign the ColorBox event to elements $("a[rel='example1']").colorbox(); $("a[rel='example2']").colorbox({transition:"fade"}); $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"}); $("a[rel='example4']").colorbox({slideshow:true}); $(".example5").colorbox(); $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344}); $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"}); $(".example9").colorbox({ onOpen:function(){ alert('onOpen: colorbox is about to open'); }, onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, onClosed:function(){ alert('onClosed: colorbox has completely closed'); } });});
OK,ColorBox就介绍到这里,希望对大家有所帮助。
原文链接
转载于:https://www.cnblogs.com/sxwgf/archive/2011/10/31/2230867.html
jQuery图片播放插件ColorBox使用方法相关推荐
- jQuery图片播放插件prettyPhoto使用介绍
演示效果 http://www.17sucai.com/preview/131993/2014-07-09/mac-Bootstrap/gallery.html 点击之后的效果 使用方法 Query ...
- jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
- 十个jQuery图片画廊插件推荐
2019独角兽企业重金招聘Python工程师标准>>> jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuer ...
- Cropper – 简单的 jQuery 图片裁剪插件
Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...
- 精心挑选的23款美轮美奂的 jQuery 图片特效插件
jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...
- jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...
- jQuery图片延迟加载插件jQuery.lazyload
查看演示 website 立即下载 插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方 ...
- 前端开发不容错过的jQuery图片滑块插件(转)
作为前端开发者,我们会碰到很到各种各样的jQuery插件.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也许你可以用到. 1.jQu ...
- html 水印插件,jquery图片水印插件
Img2Blob.js是一款可以为图片添加自定义水印的jquery插件.该jquery图片水印插件可以将图片转换为blob对象,然后为其添加自定义水印效果. 使用方法 在页面中引入jquery和img ...
- 一个简单的 jQuery 图片裁剪插件----cropper
浏览器支持 Chrome (latest 2) Firefox (latest 2) Internet Explorer 8+ Opera (latest 2) Safari (latest 2) C ...
最新文章
- “照骗”难逃Adobe的火眼金睛——用机器学习让P图无所遁形
- 2020年,计算机视觉领域会有哪些新的研究方向值得提前探索?
- 神经网络 深度学习 专业术语解释(Step, Batch Size, Iteration,Epoch)
- angular html清除元素,使用AngularJS删除DOM元素
- 几个功能强大的系统源码(机票分销、机票预订、OA、手机充值、wifi营销、网络超市、体检平台)...
- linux下解包bin二进制文件_linux下如何使用docker二进制文件安装_docker离线安装
- java 整数变负数_一文帮你读懂Java整数的存储原理
- (总结)Linux下多行合并成一行,中间加分隔符
- Android Studio 工具窗口浮动与布局恢复【申明:来源于网络】
- pandas处理mysql 展现wpf_Pandas DataFrame使用多列聚合函数
- better-scroll在vue中的使用
- springmvc中常见的简单的文件上传和下载
- 计算机考研政治考哪些知识,带你了解408考研大纲,及21考研政治复习建议
- GitHub:一款基于OCR技术的翻译器
- Python正则表达式快速入门
- star法则 java_STAR法则(示例代码)
- Color correction matrix(色彩矩阵)的学习思考
- 靠追热点出圈,网易传媒打造“爆款制造机2.0”
- 软件架构设计---架构设计
- 工具类--GeneralUtil