jQuery外掛-酷炫ContentFlow相片特效直接套用
分類:Javascript | 2010-11-30
ContentFlow:
特效名稱:ContentFlow
特效版本:1.0.2 (2010/02/19)
特效性質:免費(授權條款)
特效性質:IE8+、Firevox3.0+、Safari4.0+、iPhone/iPod、Oprea10+、Chrome4.0+
官方網站:http://www.jacksasylum.eu/ContentFlow/index.php
官方文件:http://www.jacksasylum.eu/ContentFlow/docu.php
官方特效列表:http://www.jacksasylum.eu/ContentFlow/addons.php
官方下載:http://www.jacksasylum.eu/ContentFlow/download.php
本站下載(梅問題整合版):
特效版本:1.0.2 (2010/02/19)
特效性質:免費(授權條款)
特效性質:IE8+、Firevox3.0+、Safari4.0+、iPhone/iPod、Oprea10+、Chrome4.0+
官方網站:http://www.jacksasylum.eu/ContentFlow/index.php
官方文件:http://www.jacksasylum.eu/ContentFlow/docu.php
官方特效列表:http://www.jacksasylum.eu/ContentFlow/addons.php
官方下載:http://www.jacksasylum.eu/ContentFlow/download.php
本站下載(梅問題整合版):
基本設定與使用:
下載完畢後解壓縮,開啟html檔並於指定區塊插入相關的語法:
Step1
放在<head>.....</head>之間:
<link rel="stylesheet" title="Standard" href="css/styles.css" type="text/css" media="screen" /> <script language="JavaScript" type="text/javascript" src="contentflow.js"></script> <script tyle="text/javascript"> var cf = new ContentFlow('contentFlow', { reflectionColor: "#000000" ,startItem:3 //起始item,預設是中間 ,endOpacity:0.1 //後面item透明度 ,visibleItems:3 //後面顯示item數量 ,maxItemHeight:0 //最大高度 ,relativeItemPosition:"center" }); </script> |
Step2
放在<body>.....</body>之間:
<div id="contentFlow" class="ContentFlow"> <!-- should be place before flow so that contained images will be loaded first --> <div class="loadIndicator"><div class="indicator"></div></div> <div class="flow"> <!-- 圖片縮圖區塊 開始 --> <div class="item"> <img class="content" src="pics/01.jpg" /> <div class="caption">imgDemo01</div> </div> <!-- 圖片縮圖區塊 結束 --> <!-- 圖片縮圖區塊 開始 --> <div class="item"> <img class="content" src="pics/02.jpg"/> <div class="caption">imgDemo02</div> </div> <!-- 圖片縮圖區塊 結束 --> <!-- 依續向下增加 --> <!-- ........ --> </div> <div class="globalCaption"></div> <div class="scrollbar"> <div class="slider"><div class="position"></div></div> </div> </div> |
這是最基本的應用,若要更詳盡說明,可至官網:http://www.jacksasylum.eu/ContentFlow/docu.php
加入連結(target):
而它內建的連結,則是直接開啟圖片的原始尺寸,當然它也可以設定為超連結與target。
Step1
在item後面加上href就可囉!由於預設是開本視窗,若要開啟新視窗可用target="_blank",當然也可開在指定的框架名稱中。
<div class="item" href="連結URL" target="_blank">
加入更多的特效模組:
在官網中AddOnes還有很多的特效,都可將喜歡的特效展示元件套上去,現在就來看要如何來套用。
Step1
進到官網的AddOns ,看到喜歡的特效後,在該特效後方有個Download: 並點選.zip,將該特效下載回來。
Step2
下載完畢後,解壓縮並將裡面的東西,全部複製到原本的目錄下。
Step3
用記事本開啟原來的html原始檔,並在<head>.....</head>將剛所下載的特效語法加入,src輸入剛所下載元件的.js完整名稱,load部分輸入剛AddOns中的特效名稱。
<script language="JavaScript" type="text/javascript" src="ContentFlowAddOn_screwdriver.js" load="screwdriver"></script>
將子就可以用囉!在官網的AddOns裡有各式各樣的特效,都可以自由的下載來使用,而官網中也有很多的參數可使用,梅干只使用自已所需的部分, 各位若有興趣也可自行多加研究,不得不佩服js愈來愈強大,以前這種特效都要用flash,現在只要js就可搞定,也不用擔心瀏覽器的flashplayer版本,並且檔案更加輕巧。
範例預覽:ContentFlow(基本版)
範例預覽:ContentFlow(連結版)
範例預覽:ContentFlow(特別版)
分享給更多朋友 分享
延伸閱讀:
jQuery教學-側邊固定滑出式選單
jQuery外掛-jQuery Masonry瀑布流版型套件
jQuery外掛-「SuperResize打造全螢幕背景」適用各瀏覽器
jQuery教學-打造自已專屬的下拉選單樣式
jQuery教學-畫面上下滑動到指定區塊
jQuery教學-側邊固定滑出式選單
jQuery外掛-jQuery Masonry瀑布流版型套件
jQuery外掛-「SuperResize打造全螢幕背景」適用各瀏覽器
jQuery教學-打造自已專屬的下拉選單樣式
jQuery教學-畫面上下滑動到指定區塊 標籤: ContentFlow, CoverFlow, imageflow, js coverflow
引用網址: ※如有發現掉圖或檔案無法下載,請由回應區留言告知,將會盡速處理!謝謝~
※本站採用CC授權請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處~謝謝~~。
引用網址: ※如有發現掉圖或檔案無法下載,請由回應區留言告知,將會盡速處理!謝謝~
※本站採用CC授權請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處~謝謝~~。
請問~~
要怎麼設定自動播放呢,
我加載了screwdriver,
可是搜索auto等字眼都沒看到相關的設定~
请教,有没有支持在ipad上面的这类特效呢