下面介紹一款jquery圖片播放插件叫Fancybox,項目主頁地址:http://fancybox.net/
Fancybox的特點如下:
1、可以支持圖片、html文本、flash動畫、iframe以及ajax的支持
2、可以自定義播放器的CSS樣式
3、可以以組的形式進行播放,導航的按鈕(上一項,下一項)
4、如果將鼠標滾動插件(mouse wheel plugin)包含進來的話Fancybox還能支持鼠標滾輪滾動來翻閱圖片
5、Fancybox播放器支持投影,更有立體的感覺
Fancybox使用方法:
1、引入jquery核心庫和Fancybox插件庫
<script type="text/javascript" src="/js/jquery-1.8.0.js"></script> <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
可選-如果需要用到fancy transition(一些動畫效果)你還需要引入以下腳本
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
可選-如果需要支持鼠標滾輪滾動效果你還需要引入以下腳本
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
2、添加樣式文件
3、在頁面上創建鏈接元素
A、圖片元素
B、普通文本
vcD48cD48L3A+PHByZSBjbGFzcz0=”brush:java;”>點擊這裡將顯示文本
那片笑聲讓我想起我的那些花兒,在我生命每個角落靜靜為我開著.
C、Iframe
Baidu
D、不同的動畫風格
E、不同的標題位置
F、以組的形式進行播放
4、jquery實現效果
<script type="text/javascript"> $(function(){ $("a#simple_1").fancybox(); //圖片元素 $("a#simple_2").fancybox(); //普通文本 $("#simple_3").fancybox({ //iframe元素 'width' : '75%', 'height' : '75%', 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe' }); //不同的動畫風格 $("a#example1").fancybox(); $("a#example2").fancybox({ 'overlayShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); $("a#example3").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none' }); $("a#example4").fancybox({ 'opacity' : true, 'overlayShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'none' }); //不同的標題位置 $("a#example5").fancybox(); $("a#example6").fancybox({ 'titlePosition' : 'outside', 'overlayColor' : '#000', 'overlayOpacity' : 0.9 }); $("a#example7").fancybox({ 'titlePosition' : 'inside' }); $("a#example8").fancybox({ 'titlePosition' : 'over' }); //以組的形式進行播放 $("a[rel=example_group]").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none', 'titlePosition' : 'over', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return 'Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + ''; } }); }) </script>