[求助]如何設定DIV的位置

May 6, 2009, 11:21 pm

請問我要用什麼方法才可以把4塊DIV排成像"田"字，這樣的效果呢...
我研究了好久，有用了float和margin但是還是無法正確排出位置......希望各位高手可以為我解答...非常感謝><

↧

[求助]關於hover的變化問題請教?

November 4, 2009, 6:13 pm

CSS部份:
p {border-style:outset;}
a:hover{border-style:inset;}

我的內文:
＜ａ　ｈｒｅｆ＝PriveLink.asp?s=”ｈｐｐｔ：／／”＞＜p＞測試123＜/p＞＜/a＞
＜ａ　ｈｒｅｆ＝PriveLink.asp?s=”ｈｐｐｔ：／／”＞＜p＞測試456＜/p＞＜/a＞
＜ａ　ｈｒｅｆ＝PriveLink.asp?s=”ｈｐｐｔ：／／”＞＜p＞測試789＜/p＞＜/a＞

做出來的結果..
p {border-style:outset;}
邊框會包著文字..後面會很長的空白..
重點來了..
a:hover{border-style:inset;}
它只讓我文字的部份有變化..但後面很長的空白卻沒反應!!!
這樣的按鈕型態看起來並沒有一體的感覺了..
像是局部份被切開一樣..

請問我要怎麼去改a:hover..
才可以讓我整個邊框都會有變化???

↧

[求助]javascript物件導向模組化

November 9, 2009, 11:39 am

≫ Next: 你應該知道的幾個CSS3技巧

≪ Previous: [求助]關於hover的變化問題請教?

剛接觸javascript不久不知道請問一下javascript 如何實作出oo並封裝??各位高手可以指導一下小弟嗎?

↧

你應該知道的幾個CSS3技巧

April 3, 2010, 6:00 pm

≫ Next: CSS3學習範例

≪ Previous: [求助]javascript物件導向模組化

你應該知道的幾個CSS3技巧

你們中有許多人可能已經聽到過有關CSS3的不少傳言，但是我們現在能真正用到的CSS3技巧又有哪些呢？本文，我將向你展示 一些與眾不同的CSS3技巧，這些技巧在一些主要的瀏覽器中表現良好（如Firefox，Chrome，Safari，Opera瀏覽器）。這些效果會在不支持的瀏覽器中降級渲染（如IE瀏覽器）。使用瀏覽器特定的聲明，許多提議的CSS3樣式都可以馬上拿來使用。

圖片：

如果你不知道瀏覽器的特定聲明是什麼，你只需要記住它們都是CSS樣式屬性前與內核提供商有關的特定前綴。因為CSS3目前還沒得到全面的支持，所以我們需要使用這些特定聲明。具體的形式如下：

* Mozilla/Firefox/Gecko瀏覽器的前綴: -moz-
* Webkit (Safari/Chrome)瀏覽器的前綴: -webkit- （ 注意： 一些Wbkit的前綴只能在Safari下使用，Chrome不支持。）

你可能已經看到了，使用這些聲明的有一個缺點，那就是如果我們想在Firefox，Safari和Chrome中都得到CSS3的效果，我們需要使用到上面所有這些前綴。也不用驚訝，IE瀏覽器不支持CSS3，因此也就不像其他主要瀏覽器有一個特定的前綴聲明。

好了，我們已經講的夠多了，我們馬上嘗試一下。 注意： 樣式聲明去掉這些前綴就是W3標準的實際規範提議。

關於這個頁面的Demo（實例）說明

所有這些例子都是在這個頁面裡面，如果你不能正常查看實例的效果（或者只能查看部分），那說明你正在使用的瀏覽器並不支持這些CSS3效果

陰影效果

陰影效果接受多個參數值。第一個是陰影的顏色，它還接受另外四個長度（lenght）值，前兩的長度值分辨是X（水平）偏移量和Y（垂直）偏移量。接下一個參數是反映模糊度的數值。第四也是最後一個值是用來定義模糊的散佈程度。

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;

圖片：

陰影效果演示

漸變效果

CSS3的漸變樣式剛開始很容易讓人混淆，尤其-moz和-webkit的漸變之間還存在不同。在-moz中，你首先需要定義漸變的方向，然後定義起始和終止的顏色。而-webkit的漸變則稍稍複雜一些，首先你需要定義漸變的類型，然後接下來兩個值定義方向，最後兩個值定義了漸變的起始顏色和終止顏色。

-moz-linear-gradient(-90deg,#1aa6de,#022147);
-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

圖片：

漸變效果演示

RGBA顏色模式

RGBA的顏色定義實際用起來沒有給人的感覺那麼複雜，它接受四個參數值，以此是：紅色值，綠色值，藍色值，以及透明度。我們不用hex（#）16進制值的顏色，我們以RGB的模式來設置顏色，其中，透明度可以設置顏色的透明效果。透明度的取值範圍在0到1之間，0是完全不透明，1是顏色完全透明。下面這些演示例子的透明度都是0.5，元素的透明度是50%，rgba不需要附加任何特定的瀏覽器前綴聲明。

background-color: rgba(0, 54, 105, .5);

圖片：

HSL色彩模式（色調H，飽和度S ，亮度L）

除了RGBA，CSS3也支持HSL顏色模式。這給我們在顏色和色調的選擇上提供了充足的餘地。在HSL這種色彩模式中的H代表色調，S代表色度，L代表亮度。色調是色盤上角度值，而保飽和度和亮度則是顏色的百分比值。

background-color: hsl(209,41.2%, 20.6%);

圖片：

HSL演示實例

↧

CSS3學習範例

June 6, 2010, 4:04 am

≫ Next: 那些相見恨晚的JavaScript 技巧

≪ Previous: 你應該知道的幾個CSS3技巧

CSS3學習範例

http://mashable.com/2010/06/04/awesome-css3-techniques/

For designers and developers, CSS has long been a powerful part of the web design process, but with the emergence of CSS3 and the growth of both the spec and the number of browsers that support it, amazing options are being opened up for designers.

It’s now possible to do all sorts of cool things just using CSS — even animation. Although not all of the effects work across browsers (even browsers that have CSS3 support) and some things are more for show and tell than actual use, there is seemingly no shortage of cool things you can do, just with the stylesheet.

Here are seven of our favorite CSS3 techniques that have a real-world use and that you can start experimenting with right now.

1. Awesome CSS3 Buttons

圖片：

One of the coolest things about CSS3 is that you can create scalable elements, like buttons, without having to create brand new images every time! ZURB highlights how to make some super excellent CSS3 buttons, complete with RGBA for awesome shading.

Also check out ZURB’s Playground which has tons of really cool CSS3 examples and coding techniques.

2. CSS3 Bar Graph

圖片：

Ben Lister details a bevy of practical CSS3 techniques for web designers, including this awesome image-less 3D bar chart. Using the -webkit-transform or -moz-transform calls and a designated skew, you can do some really impressive image-free effects completely in CSS!

3. CSS3 Dropdown Menu

圖片：

Nick La from WebDesignerWall shows off how to make a really great looking CSS3 dropdown menu that really pop off the page. He has instructions for both a gradient-image and completely CSS versions, so depending on your audience, you might be able to do the whole thing, gradient effects and all, completely in CSS.

CSS3 Speech Bubbles

圖片：

Nicolas Gallagher has created some absolutely stellar pure CSS speech bubbles. These things not only look great, they can even be modified to be used as blockquote elements.

If you want to see my favorite implementation, check out Gallagher’s demo page and look at the Twitter example. It seriously beats the pants off of Twitter’s official embed method.

CSS3 Border Radius Hover States

圖片：

At Impressive Webs, Louis Lazaris put together a fantastic tutorial for recreating a really great looking effect he saw on Media Temple’s website. Using CSS3 border radius, he shows how you can create awesome looking hover effects that look really, really sharp.

CSS3 Box Shadow

圖片：

Speaking of CSS3 borders, the gang at Carsonified has put together a really stellar video tutorial showing off some advanced CSS3 box shadow techniques for creating depth in your projects, just using CSS3.

Following the tutorial, you can see how to create that great letterpressed effect in elements of your design.

CSS3 Photo Gallery

圖片：

Apple just launched a new page showing off some of the cool things that HTML5 can do. Because HTML5 and CSS3 are often linked together, there is some overlap in techniques. One of my favorite demos was this Polaroid-style photo gallery/lightbox created using CSS3.

Some of the transitions and 3D effects won’t work on all browsers, but its a really cool example of some of the WebKit specific CSS3 transitions that Chrome(), Safari() and other WebKit-based browsers can benefit from.

↧

那些相見恨晚的JavaScript 技巧

July 1, 2010, 6:33 pm

≫ Next: [求助][急問]我想造一個網頁可以記錄瀏覽人士的ip address可以點做? thx

≪ Previous: CSS3學習範例

那些相見恨晚的JavaScript 技巧

JavaScript 的成功讓人津津樂道，為Web 網頁編寫JavaScript 代碼已經是所有Web 設計師的基本功，這門有趣的語言蘊藏著許多不為人熟知的東西，即使多年的JavaScript 程序員，也未能完全吃透。本文從7個方面講述JavaScript 中那些你不很熟知但非常實用的技巧。

簡略語句

JavaScript 可以使用簡略語句快速創建對象和數組，比如下面的代碼：

可以使用簡略語句如下：

在新視窗檢視

對象car 就此創建，不過需要特別注意，結束花括號前一定不要加";" 否則在IE 會遇到很大麻煩。

創建數組的傳統方法是：

在新視窗檢視

使用簡略語句則：

在新視窗檢視

另一個可以使用簡略語句的地方是條件判斷語句：

在新視窗檢視

可以簡略為：

在新視窗檢視

JSON 數據格式

JSON 是"JavaScript Object Notation"的縮寫，由Douglas Crockford設計，JSON改變了JavaScript在緩存複雜數據格式方面的困境，如下例，假如你要描述一個樂隊，可以這樣寫：

在新視窗檢視

你可以在JavaScript中直接使用JSON，甚至作為某些API的返回數據對象，以下代碼調用著名書籤網站 delicious.com 的一個API，返回你在該網站的所有書籤，並顯示在你自己的網站：

在新視窗檢視

JavaScript 本地函數(Math, Array 和String)

JavaScript 有很多內置函數，有效的使用，可以避免很多不必要的代碼，比如，從一個數組中找出最大值，傳統的方法是：

在新視窗檢視

使用內置函數可以更容易實現：

在新視窗檢視

另一個方法是使用Math.max() 方法：

在新視窗檢視

你可以用這個方法幫助探測瀏覽器

在新視窗檢視

這解決了IE 瀏覽器的一個問題，通過這種方法，你總是可以找到那個正確的值，因為瀏覽器不支持的那個值會返回undefined。

還可以使用JavaScript 內置的split() 和join() 函數處理HTML 對象的CSS 類名，如果HTML 對象的類名是空格隔開的多個名字，你在為它追加或刪除一個CSS 類名的時候需要特別注意，如果該對像還沒有類名屬性，可以直接將新的類名賦予它，如果已經存在類名，新增的類名前必須有一個空格，用傳統的JavaScript 方法是這樣實現的：

在新視窗檢視

使用split 和join 方法則直觀優雅得多：

在新視窗檢視

事件代理

與其在HTML 文檔中設計一堆事件，不如直接設計一個事件代理，舉例說明，假如你有一些鏈接，用戶點擊後不想打開鏈接，而是執行某個事件，HTML 代碼如下：

在新視窗檢視

傳統的事件處理是遍歷各個鏈接，加上各自的事件處理：

在新視窗檢視

使用事件代理，可以直接處理，無需遍歷：

在新視窗檢視

↧

[求助][急問]我想造一個網頁可以記錄瀏覽人士的ip address可以點做? thx

August 28, 2010, 1:28 pm

≫ Next: css3練習- 笑臉

≪ Previous: 那些相見恨晚的JavaScript 技巧

我想造一個網頁可以記錄瀏覽人士的ip address可以點做?
因為係工司要求的D幾日要做到,所以好急希望有人可以到我
我想知道確實的做法如html,javascript,php等
感激不盡 thx

↧

css3練習- 笑臉

August 30, 2010, 2:06 pm

≫ Next: CSS3做的貪吃蛇小遊戲

≪ Previous: [求助][急問]我想造一個網頁可以記錄瀏覽人士的ip address可以點做? thx

css3練習- 笑臉

展示地址見：點擊查看

圖片：css3.jpg

要用支援 HTML5的瀏覽器看才有效果喔！

↧

September 4, 2010, 4:14 am

≫ Next: 15款jQuery幻燈片插件(下)

≪ Previous: CSS3測試之——QQ企鵝

15款jQuery幻燈片插件(上)

幻燈片效果通常用於展示相簿圖片或特色推薦內容。一個漂亮的幻燈片更能吸引訪客的注意力。本文裡面，收集了15款jQuery幻燈片插件，讓你的圖片展示更漂亮，讓你的特色內容更吸引人。這些幻燈片的效果其實都很炫，估計用在蜂鳥那裡會比較靠譜點。

1.Gallerific

圖片：

Beautiful Slider，光看這個效果圖你就知道這個插件有多棒了吧，是的，這個插件實現的效果已經不遜色於Flash完成的效果，整體表現流暢，文字顯示效果更是創意獨特。

８.LoopedSlider

圖片：

loopedSlider是又一個任意內容捲動切換的幻燈片插件，使用操作簡單。

9.SpaceGallery

圖片：

SpaceGallery是一個全新的jQuery插件，點選目前圖片，會自動放大消失，同時後面的圖片向前展示，有一種時光電腦的感覺。

10.jQuery Popeye

圖片：

11.Noobslide

圖片：

12.Accessible News Slider

圖片：

13.SmoothGallery

圖片：

SmoothGallery是一個最好的幻燈片效果之一，可以實現各種不同的幻燈片轉換效果。

14.jQuery Multimedia Portfolio

圖片：

jQuery Multimedia Portfolio是一個基於jQuery的滑動效果插件,除了可以展示圖片之外，還可以加入各種不同類型的多媒體檔案。

15.s3Slider

圖片：

s3Slider是一個非常簡單實用的流暢幻燈片效果，這個插件被應用在無數的WordPress專業主題樣板。

↧

15款jQuery幻燈片插件(下)

September 4, 2010, 4:18 am

≫ Next: JQuery插件:TextboxList

官方網站 | 演示

圖片：

13. 一個簡約的jQuery插件

官方網站 | 演示

WebDesignBooth的一個教程，介紹如何使用強大的jQuery庫創建簡單的內容幻燈效果。

圖片：

14. BarackSlideshow

官方網站 | 演示

一個灰常小巧和輕量的幻燈腳本，靈感來自於美國總統Baracka Obama網站的一個幻燈效果。該腳本獲取MorphList的能力，並增強圖片的可視化和導航。

圖片：

15. 使用JQuery s3Slider的wordpress模板

官方網站 | 演示

在WP中使用JQuery s3Slider插件來創建幻燈內容。

圖片：

其實，jQuery的幻燈插件並不只這些，還有CodaSlider、JQuery Cycle Plugin等，當然有些隻隻能用在圖片的，而大部分是可用於內容的。如果你有遇到比較好的插件或技術本文沒有提到，歡迎在評論中給我們提出——神飛

↧

JQuery插件:TextboxList

September 4, 2010, 4:32 am

≫ Next: 20個學習CSS的絕佳網站-讓你從入門到精通

≪ Previous: 15款jQuery幻燈片插件(下)

JQuery插件:TextboxList

TextboxList可以把使用者在TextBox的輸入轉換為列表.而且每個子項很容易刪除.同時它支援自動完成功能.

本人使用感覺:在Tag管理,TextBox自動完成方面表現不錯.

TextBoxList這種風格在Facebook中開始使用,很多開發者競相模仿.出現了各種客戶端語言的版本:

Prototype:

MooTools:

TextboxList

jQuery:

圖片：

由於本人對JQuery比較偏愛.故推薦使用JQuery版本的TextBoxList

官網地址:http://devthought.com/projects/jquery/textboxlist/

展示地址:devthought.com/wp-content/projects/jquery/textboxlist/Demo/

簡單用法:

↧

20個學習CSS的絕佳網站-讓你從入門到精通

September 29, 2010, 11:15 pm

≫ Next: 如何變更欄位資料

≪ Previous: JQuery插件:TextboxList

20個學習CSS的絕佳網站-讓你從入門到精通

CSS（層疊樣式表）是一種簡單的設計語言，能夠將頁面變漂亮這回事兒變的簡單化。在HTML和XHTML中設定頁面的樣式，這是最常用的應用。但也可以應用於 XML類的文件，包括SVG和XUL。他負責管理網頁的設計和外觀。使用CSS，你可以控制文字的顏色、字體、段落間距、分欄的數目大小佈局、背景圖片顏色，以及其他很多種的效果。接下來才是要說的是學習並掌握CSS的20個絕佳網站。這裡收集到的CSS網站能使你從初學者到進階人員。這些能協助你開發和改進網站。嗯，隨便看看吧。

Csstutorial

圖片：

這個網站全部是關於CSS的。萬一你不熟悉CSS：CSS是HTML的一種姐妹技術，可以設計你的頁面。這些細節都在教程裡面，不過現在我就可以說Css可以讓你頁面看起來更好！
Visit Site
cssbasics

圖片：

這個網站中，你可以從每段內容裡學到單獨的樣式，覆蓋了Css所有的基礎知識。
Visit Site
w3schools

圖片：

在這個網站裡，你會學到如何使用Css來控制多種頁面的樣式和佈局。
Visit Site
htmlgoodies

圖片：

用網站裡面的這些超多的效果來設定你的頁面效果吧。
Visit Site
cssdog

圖片：

Css很容易理解和學習，還為HTML的外觀提供強大的控制力。多數情況下，Css和HTML和XHTML捆綁在一起使用。
Visit Site
htmldog

圖片：

這個手冊的目的是看到本質---已經足夠開始了。The CSS Intermediate Tutorial and CSS Advanced Tutoria這兩個教程有很多關於CSS的深度訊息。
Visit Site
lesliefranke

圖片：

這個網站裡面有很多 CSS cheats可以幫助你寫Css。
Visit Site
richinstyle

圖片：

學習Css、樣式等訊息，以及如何應用他，都可以在這裡找到。
Visit Site
csseasy

圖片：

不用在整本書書裡找到複雜的步驟，在這個網站裡面可以學到很多現代的CSS的方式
Visit Site
blooberry

圖片：

這個網站用字母序提供了Css所有的屬性可供檢視。
Visit Site
css-tricks

圖片：

這個網站學到更多CSS tricks ，可能會對你的網站有用哦。
Visit Site
www.css3.com

圖片：

一個常用的CSS3的指南、教程、blog網站。
Visit Site
alistapart

圖片：

這個網站教給你一些關於CSS的技術、技巧等更多關於CSS的知識。
Visit Site
456bereastreet

圖片：

CSS用來定義網站的外觀佈局。Css是怎麼工作的問題一直不太明瞭，這個網站裡面很多文章解釋了關於CSS的方方面面。
Visit Site
echoecho

圖片：

CSS對HTML來說是一個很好的補充。
Visit Site
css-discuss.incutio

圖片：

這個維基百科致力於Css應用的實際情況（理想狀態和瀏覽器效果）
Visit Site
tizag

圖片：

是時候讓你的CSS頁面設計技能提高一個層次了。有很多方法讓你的HTML在一個有效的管理之下，觀感得到更有效的控制。
Visit Site
barelyfitz

圖片：

這個教程可以檢查CSS中不同的佈局屬性： position:static, position:relative, position:absolute, and float.
Visit Site
meyerweb

圖片：

這裡收集了很多先進的Css驅動的設計Demo，是作者自己寫的，僅作為一個展示跟你說明在某個瀏覽器內你可以用CSS來實現他。
Visit Site
cssdocs

圖片：

透過這個頁面搜尋任何關於CSS的訊息。
Visit Site

原文連結：http://blueblots.com/development/20-best-websites-to-learn-and-master-css/
翻譯：良印堂www.lintekshop.com

↧

如何變更欄位資料

October 28, 2010, 11:01 pm

≫ Next: 2010年最佳jQuery插件

≪ Previous: 20個學習CSS的絕佳網站-讓你從入門到精通

請問有誰可以幫我解決

就是我有一個"96年班級資料表" 跟 "97年班級資料表"

要如何設定他在一年後資料自動轉移到97年的資料表呢

或是按一個按鈕，96年的資料會全部跑到97年中

如果有人知道可以告訴我嗎??我很急著要解答

拜託拜託

↧

2010年最佳jQuery插件

December 5, 2010, 4:54 am

≫ Next: 好用的圖片輪播廣告JavaScript源程式碼

≪ Previous: 如何變更欄位資料

2010年最佳jQuery插件

在前兩周國外知名部落格WDL先後分享了「2010最佳系列」中的「最佳免費WordPress主題」和「最佳免費字體」，在這個星期又發佈了2010年最佳jQuery插件。在2010年，JavaScript框架繼續日漸普及，這使得大量的插件被開發出來。滿目琳琅，難以選擇心頭之好。WDL的作者從大量的優秀jQuery插件精心篩選出一些對Web Designers有幫助的和具備非常不錯的視覺效果的Best of the best。

圖片：

YoxView是一個免費的多媒體播放jQuery插件。它易於使用，功能豐富。你可以用它來展示各種媒體，如圖像，視訊，內嵌的內容，iframes，Flash等等。

MK編譯 via WDL

原文地址:http://www.x-berry.com/best-jquery-plugins-of-2010

↧

好用的圖片輪播廣告JavaScript源程式碼

January 25, 2011, 6:18 pm

≫ Next: [jQuery]仿 Yahoo 標籤式垂直廣告輪播

≪ Previous: 2010年最佳jQuery插件

好用的圖片輪播廣告JavaScript源程式碼

有些【購物網站】經營者非常喜歡掛：（圖片輪播廣告）
那你可以製作Flash+.xml（就像ECShop購物網站首頁...中間區塊那樣！）
那你如果是其他購物網站，其實也可以用：JavaScript程式碼來達到此目的！
你只要把下面源程式碼copy並修改相應的廣告位址，然後放進你的【購物網站】（模版）網頁中設好的廣告位置就好了。
共有2種方法，由各自自己取捨。
//後面是解說，只是解說程式作用→不會執行任何作用（你會用後...也可以刪除它）。

方法一

以下為《JS》原始碼

<SCRIPT LANGUAGE="JavaScript"> 
<!-- Begin 
var how_many_ads = 4;    //你要有幾個廣告輪播 
var now = new Date() 
var sec = now.getSeconds() 
var ad = sec % how_many_ads; 
ad +=1; 
if (ad==1) { 
url="http://por.tw";   //第一個廣告的目的網站網址(下同) 
alt="互得行銷網"; 
banner="http://por.tw/logo.gif";    //該廣告顯示的圖片位址 
width="468";     //廣告圖片的長度 
height="60";     //廣告圖片的寬度 
} 
if (ad==2) { 
url="http://www.第二個網站網址.com"; 
alt="第二個廣告站"; 
banner="第二個廣告顯示的圖片位址.gif"; 
width="468"; 
height="60"; 
} 
if (ad==3) { 
url="http://www.第三個網站網址.com"; 
alt="第三個廣告站"; 
banner="第三個廣告顯示的圖片位址.jpg"; 
width="468"; 
height="60"; 
} 
if (ad==4) { 
url="http://www.第四個網站網址.com"; 
alt="第四個廣告站"; 
banner="第四個廣告顯示的圖片位址.swf"; 
width="468"; 
height="60"; 
} 
document.write('<center>'); 
document.write('<a href=\"' + url + '-:special:1:- target=-:special:1:-_blank-:special:1:->'); 
document.write('<img src=-:special:1:-' + banner + '-:special:1:- width=') 
document.write(width + ' height=' + height + ' '); 
document.write('alt=-:special:1:-' + alt + '-:special:1:- border=0><br>'); 
document.write('<small>' + txt + '</small></a>'); 
document.write('</center>'); 
// End --> 
</SCRIPT>

↧

[jQuery]仿 Yahoo 標籤式垂直廣告輪播

January 25, 2011, 6:27 pm

≫ Next: javascript 垂直輪播(跑馬燈、vertical carousel)

≪ Previous: 好用的圖片輪播廣告JavaScript源程式碼

[jQuery]仿 Yahoo 標籤式垂直廣告輪播

現在的廣告效果真的都是越做越有趣了，像是有同學問說是否能用 jQuery 做到像Yahoo!奇摩的 Flash 廣告效果，例如：超級商城的流行館或是時尚館

圖片：

這塊 Flash 廣告的基本效果是：當滑鼠移到某一項目時，除了選項的背景樣式會改變之外，還會把左邊的圖片捲動到相對應的廣告。同時若沒把滑鼠移到選項時，它會自動的每隔 N 秒輪播下一個廣告。

從畫面看來，我們至少需要一組廣告圖片及相對應數量的一組選項。這邊筆者都用 ul 來做廣告圖片及選項的區塊：

以下為《HTML》原始碼

<body>  
    <div id="adblock">  
        <ul class="showbox">  
            <li><a href="http://www.google.com/phone"><img src="images/nexus_one.gif" title="Nexus One" /></a></li>  
            <li><a href="http://www.apple.com/tw/iphone/why-iphone/"><img src="images/iphone.gif" title="iPhone 3GS" /></a></li>  
            <li><a href="http://www.htc.com/tw/product/hero/overview.html"><img src="images/hero.gif" title="HTC Hero" /></a></li>  
            <li><a href="http://www.htc.com/tw/product/hd2/overview.html"><img src="images/hd2.gif" title="HTC HD2" /></a></li>  
        </ul>  
        <ul class="link">  
            <li><a href="#">Nexus One</a></li>  
            <li><a href="#">iPhone 3GS</a></li>  
            <li><a href="#">HTC Hero</a></li>  
            <li><a href="#">HTC HD2</a></li>  
        </ul>  
    </div>  
</body>

有了兩組 ul 之後，接著要讓他們一個在左，一個在右的併排在一起：

以下為《CSS》原始碼

a img {  
    border: none;  
    vertical-align: middle;  
}  
#adblock {  
    overflow: hidden;  
    width: 920px;    /* 廣告圖片的寬 + 選單圖片最大的寬 */  
    height: 220px;    /* 廣告圖片的高 */  
    border: 1px solid #ccc;  
    position: relative;  
}  
#adblock ul, #adblock li {  
    margin: 0;  
    padding: 0;  
    list-style: none;  
}  
#adblock ul.showbox, #adblock ul.link {  
    position: absolute;  
}  
#adblock ul.showbox li a {  
    display: block;  
    height: 220px;    /* 廣告圖片的高 */  
}  
#adblock ul.link {  
    right: 0;  
}  
#adblock ul.link li a {  
    display: block;  
    width: 180px;    /* 滑鼠未移入時的選單圖片寬 */  
    height: 55px;    /* 選單圖片的高 */  
    position: absolute;  
    text-indent:20px;  
    line-height: 55px;  
    background-color: #ccc;  
    right: 0;  
    background: url(images/menu.off.gif);  
}  
#adblock ul.link li a.selected {  
    width: 200px;    /* 滑鼠移入時的選單圖片寬 */  
    text-indent: 40px;  
    background: url(images/menu.on.gif);  
}

筆者為了讓選項也能像Yahoo!奇摩的一樣能靠右對齊且左邊是突出去的，因此就讓選項的 position 設成 absolute 之外，還讓它們的 right 都是歸 0 靠右。但這樣選項卻因為沒設定 top 而推擠在一起了：

圖片：

雖然可以一張一張的設定 top 位置，但筆者實在是太懶了，因此就把排位置的動作都交給 jQuery 來代勞：

以下為《JS》原始碼

$(function(){  
    $('#adblock ul.link li a').each(function(i){  
        // 把選單排好位置  
        $(this).css('top', i * 55);  
    });  
});

圖片：

接下來就讓我們一口氣來完成接下來的事件及動作吧：

以下為《JS》原始碼

$(function(){  
    // 大廣告圖片的高度及動畫時間  
    var adHeight = 220,  
        animateSpeed = 400;  
    $('#adblock ul.link li a').each(function(i){  
        // 把選單排好位置  
        $(this).css('top', i * 55);  
    }).mouseover(function(){  
        var $this = $(this),  
            // 找出目前 li 是在選單中的第幾個(jQuery 1.4)  
            no = $this.parent().index();  

        // 先移除有 .selected 的超連結的樣式  
        $('#adblock ul.link li a.selected').removeClass('selected');  
        // 再把目前點擊到的超連結加上 .selected  
        $this.addClass('selected');  

        // 把 ul.showbox 的 top 移到相對應的高度  
        $('#adblock ul.showbox').stop().animate({  
            top: adHeight * no * -1  
        }, animateSpeed);  
    }).focus(function(){  
        $(this).blur();  
    }).eq(0).mouseover();  
});

有沒有發現到咱們的程式+註解都還比 CSS 還要少咧？其實要寫出一個好的效果，除了程式之外，CSS 所扮演的角色也是有一定的份量的唷！若沒問題的話，預覽時可以看到不輸給 Flash 的廣告效果：

圖片：

只要把滑鼠移到右邊的選項時，左邊的圖片就會自動捲動到相對應的廣告。若要讓它能自動輪播的話，則得再加上一個計時器而控制用的函式：

以下為《JS》原始碼

$(function(){  
    // 大廣告圖片的高度及動畫時間  
    // 計時器及輪播時間(毫秒)  
    var adHeight = 220,  
        animateSpeed = 400,  
        timer,  
        speed = 3500;  

    function showNext(){  
        // 找出目前是第幾個選項被展示出來(jQuery 1.4)  
        var $li = $('#adblock ul.link li'),  
            no = $li.has('a.selected').index();  

        // 計算出下一個要展示的廣告選項  
        no = (no + 1) % $li.length;  

        // 觸發指定選項的 mouseover 事件  
        $li.eq(no).children('a').mouseover();  

        // 再啟動計時器  
        timer = setTimeout(showNext, speed);  
    }  

    $('#adblock ul.link li a').each(function(i){  
        $(this).css('top', i * 55);  
    }).hover(function(){  
        var $this = $(this),  
            // 找出目前 li 是在選單中的第幾個(jQuery 1.4)  
            no = $this.parent().index();  

        // 先移除有 .selected 的超連結的樣式  
        $('#adblock ul.link li a.selected').removeClass('selected');  
        // 再把目前點擊到的超連結加上 .selected  
        $this.addClass('selected');  

        // 把 ul.showbox 的 top 移到相對應的高度  
        $('#adblock ul.showbox').stop().animate({  
            top: adHeight * no * -1  
        }, animateSpeed);  

        // 移除計時器  
        clearTimeout(timer);  
    }, function(){  
        // 啟動計時器  
        timer = setTimeout(showNext, speed);  
    }).focus(function(){  
        $(this).blur();  
    }).eq(0).addClass('selected');  

    // 當滑鼠移到廣告上時停止計時器..移出後啟動計時器  
    $('#adblock ul.showbox li').hover(function(){  
        clearTimeout(timer);  
    }, function(){  
        timer = setTimeout(showNext, speed);  
    });  

    // 啟動計時器  
    timer = setTimeout(showNext, speed);  
});

另外要注意的是，此範例中 .has() 及 .index() 的用法是 jQuery 1.4 才支援的，因此要記的引用 1.4 版才行喔。

範例瀏覽：

http://demonstration.abgne.tw/jquery/0017/0017_1.html
http://demonstration.abgne.tw/jquery/0017/0017_2.html

以上內容於2010-01-22 14:48 發表在 http://abgne.tw/jquery/apply-jquery/j ... ahoo-tag-vertical-ad.html
來源:http://www.flycan.com.tw/board/modules/newbb/viewtopic.php?topic_id=2356

↧

1. Awesome CSS3 Buttons

2. CSS3 Bar Graph

3. CSS3 Dropdown Menu

CSS3 Speech Bubbles

CSS3 Border Radius Hover States

CSS3 Box Shadow

CSS3 Photo Gallery

簡略語句

JSON 數 據格式

JavaScript 本地函數(Math, Array 和String)

事件代理

1.Gallerific

2.ZoomImage

3.EasySlider

4.The Slider from Barack Obama's website

5.CodaSlider

6.jQuery Slider II

7.Beautiful Slider

８.LoopedSlider

9.SpaceGallery

10.jQuery Popeye

11.Noobslide

12.Accessible News Slider

13.SmoothGallery

14.jQuery Multimedia Portfolio

15.s3Slider

1. jFlow

2. 使用jQuery UI實現推薦內容的幻燈展示

3. 創建漂亮的jQuery幻燈教程

4. 基於jQuery的一個簡單的內容幻燈效果

5. JC Play List

6. Easy Slider

7.jqGalScroll

8. Image Gallery

9.使用jQuery UI 製作內容幻燈

10. 創建一個自動播放的推薦內容幻燈

11. slideViewer

12. Start/Stop Slider

13. 一個簡約的jQuery插件

14. BarackSlideshow

15. 使用JQuery s3Slider的wordpress模板

JQuery插件:TextboxList

Prototype:

MooTools:

jQuery:

JSON 數據格式