特效介绍
SexyLightBox弹出层播放视频。在本插件中,弹出层不光可以显示本地图片,引用本地文件,还可以播放视频。
更多关于SexyLightBox弹出层的使用:
白色风格动感的SexyLightBox弹出层jQuery代码
黑色风格动感的SexyLightBox弹出层jQuery代码
可嵌套的SexyLightBox弹出层引用本地和互联网内容
使用方法
1、在head引入下面的代码:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="sexylightbox.v2.3.jquery.min.js"></script> <link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" /> <script type="text/javascript"> $(document).ready(function(){ SexyLightbox.initialize({color:'black', dir: 'sexyimages'}); }); </script>调用函数参数说明:color为SexyLightBox弹出层边框的颜色,这里为黑色。dir是弹出层风格的路径,例如SexyLightBox弹出层背景图片、弹出层关闭按钮、上一页下一页按钮等。
2、在html的body里面写好引入的视频,或者是flash皆可,如下面的代码:
<div id="videito" style="display:none;"> <object width="530" height="260"> <param name="movie" value="http://player.youku.com/player.php/sid/XNjk3MjEzNzQ0/v.swf"></param> <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param> <embed src="http://player.youku.com/player.php/sid/XNjk3MjEzNzQ0/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="530" height="260"></embed> </object> </div>3、在需要点击弹出弹出层的a链接这样设置:
href="#TB_inline?height=270&width=530&background=#000&inlineId=videito" rel="sexylightbox" title="SexyLightBox弹出层播放视频"href即表示需要弹出的内容,如inlineId="视频所在的外层的id",rel="sexylightbox"则是表示点击触发SexyLightBox弹出层。