读书人

jQuery插件shadowbox体味

发布时间: 2012-10-26 10:30:59 作者: rapoo

jQuery插件shadowbox体验

以前用的图片展示用的是mootools的一个工具,感觉不错,不过mootools跟jquery有冲突,所以找了个jquery的插件,感觉还不错。

shadowbox支持图片,视频,html,frame,ajax还是很强大的。

根据官网demo,写了几个例子:

1.简单的图片展示

<html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <title>New Web Project</title><link rel="stylesheet" type="text/css" href="js/shadowbox-3.0.3/shadowbox.css" _href="js/shadowbox-3.0.3/shadowbox.css"><script type="text/javascript" src="js/jquery/jquery-1.4.2.js" _src="js/jquery/jquery-1.4.2.js"></:script><script type="text/javascript" src="js/shadowbox-3.0.3/shadowbox.js" _src="js/shadowbox-3.0.3/shadowbox.js"></script><script type="text/javascript">//初始化Shadowbox.init({});</script>    </head>    <body>    <!--rel="shadowbox" 关联shadowbox--><a href="images/1.jpg" _href="images/1.jpg" rel="shadowbox">图片1</a><a href="images/2.jpg" _href="images/2.jpg" rel="shadowbox">图片2</a><a href="images/3.jpg" _href="images/3.jpg" rel="shadowbox">图片3</a><a href="images/4.jpg" _href="images/4.jpg" rel="shadowbox">图片4</a><a href="images/5.jpg" _href="images/5.jpg" rel="shadowbox">图片5</a>    </body></html>
?

2.一些参数设置

3.图片组,幻灯片效果

4.视频(在线视频地址选择flv的地址,或者swf的)

5.混合,幻灯片效果,有图片,视频,html

还有就是ajax的,这个是高级功能,首先要了解shadowbox的函数,才能写出来

本人技术有限,等学好jQuery和ajax再研究。

总的来说还不错,够用了。

读书人网 >Web前端

热点推荐