問題討論區


【JavaScript 語法】文章精華區


【教學】 [jQuery]仿 Yahoo 標籤式垂直廣告輪播



[jQuery]仿 Yahoo 標籤式垂直廣告輪播
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
現在的廣告效果真的都是越做越有趣了,像是有同學問說是否能用 jQuery 做到像Yahoo!奇摩的 Flash 廣告效果,例如:超級商城的流行館或是時尚館

Open in new window


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

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


<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 之後,接著要讓他們一個在左,一個在右的併排在一起:


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 而推擠在一起了:

Open in new window


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


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


Open in new window


嘿~這樣是不是方便很多了呢?!接下來就讓我們一口氣來完成接下來的事件及動作吧:


$(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 的廣告效果:

Open in new window


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


$(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/2/6 10:18
 


回覆: [jQuery]仿 Yahoo 標籤式垂直廣告輪播
會員一級
註冊日期:
2010/6/6 1:42
留言: 5
您好

請問若是要將選單放在左邊
該怎麼設定呢

非常感謝喔

2010/6/6 1:45
 


回覆: 回覆: [jQuery]仿 Yahoo 標籤式垂直廣告輪播
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106


#adblock ul.link {
    
right: 0;
}

改成

#adblock ul.showbox {
    
right: 0;
}


還有把 #adblock ul.link li a 中的 right: 0; 拿掉就可以了
參考:http://demonstration.abgne.tw/jquery/0017/0017_3.html

2010/6/7 10:24
 


回覆: 回覆: [jQuery]仿 Yahoo 標籤式垂直廣告輪播
會員一級
註冊日期:
2010/6/6 1:42
留言: 5
親愛的大大

非常感謝您
果然還是大大厲害

2010/6/7 10:34
 


回覆: [jQuery]仿 Yahoo 標籤式垂直廣告輪播
會員一級
註冊日期:
2010/6/6 1:42
留言: 5
請問大大

當滑鼠移到item選項時
要如何讓選項內的字保持原狀,不要變成置中呢

非常謝謝您

2010/6/7 14:20
 


回覆: 回覆: [jQuery]仿 Yahoo 標籤式垂直廣告輪播
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

把 #adblock ul.link li a.selected 中的 text-indent: 40px; 拿掉就可以了

2010/6/7 19:46
 


回覆: 回覆: 回覆: [jQuery]仿 Yahoo 標籤式垂直廣告輪播
會員一級
註冊日期:
2010/6/6 1:42
留言: 5
成功了
謝謝大大

大大
若是自動換頁的效果想要弄成像flash那樣淡出淡入的話
也能做到嗎?

謝謝您

2010/6/10 16:46
 


回覆: 回覆: 回覆: 回覆: [jQuery]仿 Yahoo 標籤式垂直廣告輪播
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106

2010/6/10 17:14
 


回覆: 回覆: 回覆: 回覆: [jQuery]仿 Yahoo 標籤式垂直廣告輪播
會員一級
註冊日期:
2010/6/6 1:42
留言: 5
大大您好

目前終於做好了一個垂直輪撥
在自己的pc上面看到的檔案,輪撥時很正常
就是menu.on 直接變成 menu.off

可是放到網路上面之後,在輪撥的時候
items的部分 會從 menu.on的顏色->變白色(大約0.5秒)->menu.off的顏色
請問我需要修改什麼地方嗎?

謝謝您

2010/6/17 13:36
 


回覆: 回覆: 回覆: 回覆: 回覆: [jQuery]仿 Yahoo 標籤式垂直廣告輪播
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
HI~

圖片載入是需要時間的...除非你是弄成一張
或者是一進到網頁就先載入

2010/6/18 16:17
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS