現在的廣告效果真的都是越做越有趣了,像是有同學問說是否能用 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 版才行喔。
男丁老師您好:謝謝你,我引用了這個範例,但是發現IE6.0的版本不適用,有方法可以解決嗎?我應該從哪裡下手呢?謝謝你!
您好:
若 要把他調成 Responsive 網頁,該如何調呢?
#adblock { overflow: hidden; width: 90%; }
這樣整個圖片大小還可以調,
但
#adblock ul.link li a {
display: block;
width: 50%; /* 滑鼠未移入時的選單圖片寬 */
}
設定後,就看不到 選單圖片了!
謝謝!