現在的廣告效果真的都是越做越有趣了,像是有同學問說是否能用 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 版才行喔。
to 小愛:
可以,小弟已經修改過程式碼,只要再自行製透明及非透明兩種圖示即可
請自行看此範例的原始碼:
http://twcf2-summerhost-info/soujq-htm
將上方網址的 "-" 換成 "點"
男丁您好:
真不好意思!我又遇上麻煩了,想要用「標籤式垂直廣告輪播」加上「用 jQuery 來製作網頁頁籤(Tab)」,這兩個的「strict.dtd」或「jquery.min.js」不知是那一個衝突,放入「網頁頁籤」之後,「廣告輪播」放的位置就不會按照程式出現(我是放在很多欄很多列的表格裡),「網頁頁籤」拿掉就會正常出現在表格裡,一放入「網頁頁籤」,「廣告輪播」就跑到網頁表格外的最下面。怎麼辦?我看過這兩個的「strict.dtd」、「jquery.min.js」的檔案內容不同可以合併嗎?或是改程式的那個地方呢?
程式上方放這樣可以嗎?
通常都是 css 搞的鬼...可以的話..把你現在有問題的 html 提供給我看看
「!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "strict.dtd"
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "strict2.dtd"」
「script type="text/javascript" src="jquery.min.js"
script type="text/javascript" src="jquery.min2.js"」這兩種程式可以各放兩行嗎?
DOCTYPE 應該只能出現一次...script 則沒差..
但同樣的東西沒必要載兩次
http://www.sabugui.com.tw/0329/home/5678.htm <==直接連結吧! 先謝謝囉!
strict2.dtd 跟 jquery.min2.js 都可以拿掉..
另外...把 #adblock ul.showbox, #adblock ul.link 的 position 給拿掉就能顯示了..
但..感覺怪怪的...太多用 Table 來排版實在是太難看的懂了XD
background: url(images/menu.on1.gif);
background: url(images/menu.off.gif);
<==但變成這兩個圖及主題文字都不見了,床的圖片也不會跳了,怎麼辦?
把 html + js + 圖片整包寄給我試看看..XD
本來的換圖時間到了,狀態列就會出現"網頁發生錯誤"的字樣,剛剛的網頁已更新成您說的那樣,您可以再看看~
嗯嗯~~原本你未改之前時用非 IE 瀏覽器看是有顯示的..
但 IE 雖然一開始沒顯示..但切到其它視窗後再切回來就又有了..
這應該是 IE 在搞怪..
寄給你了,壓縮檔哦!
寄到abgne.tw@gmail.com
已回信給你...試看看吧!!
嗚~還是不行,你可以重新整理看看~
唔~剛忘了把 position: absolute; 加回去..
請你再試試剛剛寄給你的檔案吧~
沒關係,我已經找到方法可以暫時解決了。 原來,「網頁頁籤」跟「廣告輪播」只要放在表格裡的不同列就可以正常顯示了!我試了一天,總算找到一個治標不治本的方法~
一樣謝謝你很棒的範例哦~如果之後有更好的方法,記得要E-mail告訴我!先謝過囉!
其實...可以的話..盡量少用 table 來排版頁面了XD
很喜歡這個效果~