現在的廣告效果真的都是越做越有趣了,像是有同學問說是否能用 jQuery 做到像Yahoo!奇摩的 Flash 廣告效果,例如:超級商城的流行館或是時尚館
這塊 Flash 廣告的基本效果是:當滑鼠移到某一項目時,除了選項的背景樣式會改變之外,還會把左邊的圖片捲動到相對應的廣告。同時若沒把滑鼠移到選項時,它會自動的每隔 N 秒輪播下一個廣告。
從畫面看來,我們至少需要一組廣告圖片及相對應數量的一組選項。這邊筆者都用 ul 來做廣告圖片及選項的區塊:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 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 來代勞:
檢視原始碼 JavaScript
1 2 3 4 5 6 | $(function(){ $('#adblock ul.link li a').each(function(i){ // 把選單排好位置 $(this).css('top', i * 55); }); }); |
嘿~這樣是不是方便很多了呢?!接下來就讓我們一口氣來完成接下來的事件及動作吧:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $(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 的廣告效果:
只要把滑鼠移到右邊的選項時,左邊的圖片就會自動捲動到相對應的廣告。若要讓它能自動輪播的話,則得再加上一個計時器而控制用的函式:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | $(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 版才行喔。
請問一下大大
我照原始檔案摳下來
照片也都有抓js檔案也有抓
但是那個選單的背景圖片就是不會顯示可以請教一下嗎
圖片的路徑對嗎..?選單的背景圖片有兩張喔..!
menu_off.gif
menu_on1.gif
我放在同檔案的
images資料夾下面說
把你有問題的範例傳來看看...@@
推推推~~~實用的效果!!!
可以分享menu.off.gif(灰)和menu.on.gif(藍)兩張圖片嗎?
感恩呀!!
這兩圖檔我上傳到免費空間了..下載看看吧..
http://www.xun6.com/file/89e7ed620/images.rar.html
收到 非常謝謝你^^
我有個問題想請教一下~
製作完此範例後,FF看是無法正常顯示的,但IE都是正常~不了解問題是出在那!?
求救~~~~~hlep>"<~
要有範例才知道那邊有問題..@@||
你用 FF 瀏覽我的範例也是不正常嗎?
不好意思男大
就這個範例
我要把東西擺在中間
有辦法嗎因為我用table把她們包起來也沒用
可以教導一下嗎
你把整個 DIV 放在你 Table 中來使用應該是可以的吧..@@||
不然就是要提供你現在有問題的範例檔案才能找出問題
你寫的很完整也很好用
讓我頭髮不會再白了
問題來了
現在播放順序是1234...1234
播到第4的時候又會從1開始
如果
我的播放順序是1234...4321呢
我該加什麼語法
謝謝賜教
你要變更計算出下一個要展示的廣告選項這部份的判斷才行..
讓它能依你的順序來播放
想請問用c#寫 單純文字輪播..不要有圖片的..
大概要怎麼寫??
比較簡單的就是控制 Label 的座標移動囉..利用 Timer 來設訂每隔 N 時移動 M 距離。
這好讚!!我要學起來^^
想請問一下,右邊的那個區塊阿!!
可以個別放不同圖片嗎??想放各個的小圖示
(原右邊顯示區塊為灰色透明,當跑到正顯示時的區塊右邊則不透明)
可以嗎???謝謝