最近因為工作需要～比較常會用到CSS之類的東西,老實說CSS這種東西真的需要些經驗,因為用久了就會知道哪些ok那些用了會有差異,和一些解決的辦法,總而言之～就是用久就會了(我感覺要用很久)
今個順便紀錄一下Coda-Slider這個東西,Coda Silder其實就是講網頁區塊的橫向effect方式,這在flash的網頁其實頗為常見,以前做的案子透過Flex只要輕鬆的下個指令就可以做這種slide的動作,但如今不能使用flash的前提之下(為了要用精簡版又要符合我超愛酷炫的效果),公司最近的東西就使用了Coda-Slider來做
可以到這邊看看漂亮的效果 [Panic],當然官方這邊有更多的DEMO可以看看唷！！也順便為我自己紀錄一下～
但聽說這個方式對 SEO 和 Usability 有些許影響，所以盡量不要整個網站都這樣搞...
雖然我還不會用JQuery~-而且這個東西跟JQuery有相當大的關連,但自己看一下語法～稍微修修改改應該是不成問題,現在滿多CMS都有用到這類的東西,我想是未來的小趨勢吧,這陣子跟Flash真是愈來愈遠了^^
很貼心的是～這裡有滿完整的教學...當然英文是在所難免的,加減看吧～哈
講一下這個東西的好處-摘自介紹這個東西的網站(以下簡稱這個東西)
1. 這個東西不像Flash會吃CPU資源...without hogging browser CPU
2. 這個東西用不到Javascript
3. 這個東西在效果上支援tab的方式和左右navigation的方式
4. 這個東西不影響顯示內容的格式
5. 這個東西免錢...（公司應該最愛這個～哈）
說到這邊突然想到前陣子弄的影片之類的東西(因為構想是從那邊轉換過來的)
（我想我離題了...）稍微講一下怎麼弄的好了～
1. 在HTML的部份
Class navigation的部份是代表上方的tab
而class scrollContainer很明顯的就是放content的地方囉
<div id="slider">
<ul class="navigation">
<li><a href="#sites">Sites</a></li>
<li><a href="#files">Files</a></li>
<li><a href="#editor">Editor</a></li>
<li><a href="#preview">Preview</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#terminal">Terminal</a></li>
<li><a href="#books">Books</a></li>
</ul>
<!-- element with overflow applied -->
<div class="scroll">
<!-- the element that will be scrolled during the effect -->
<div class="scrollContainer">
<!-- our individual panels -->
<div class="panel" id="sites"> ... </div>
<div class="panel" id="files"> ... </div>
<div class="panel" id="editor"> ... </div>
<div class="panel" id="preview"> ... </div>
<div class="panel" id="css"> ... </div>
<div class="panel" id="terminal"> ... </div>
<div class="panel" id="books"> ... </div>
</div>
</div>
</div>
2. 在CSS的部份主要是調整整個滑動區域的樣式參數(要多大.邊界多寬之類的)
#slider {
width: 620px;
margin: 0 auto;
position: relative;
}
.scroll {
height: 250px;
overflow: auto;
position: relative; /* fix for IE to respect overflow */
clear: left;
background: #FFFFFF url(images/content_pane-gradient.gif) repeat-x scroll left bottom;
}
.scrollContainer div.panel {
padding: 20px;
height: 210px;
width: 580px; /* change to 560px if not using JS to remove rh.scroll */
}
關鍵來了
3. 在Load外部檔案的部份由於這個東西主要是使用jQuery,所以人家寫好的東西,我們就從外面把他load進來就好囉
可以放在</head>之前
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery.scrollTo-1.3.3-min.js" type="text/javascript"></script>
<script src="jquery.localscroll-1.2.5-min.js" type="text/javascript"></script>
<script src="jquery.serialScroll-1.2.1-min.js" type="text/javascript"></script>
靠邀～人家寫好的東西不給我怎麼用～
來囉～主要是剛剛那幾個.js檔案囉～看不懂就不用改了...（我也不太會）
Download下載後放在根目錄或是指定個路徑,改一下剛剛上面的路徑就ok囉～
Read more...
發表文章
