問題討論區


【JavaScript 語法】文章精華區


【教學】 [jQuery]仿 Yahoo 滾動式訊息跑馬燈



[jQuery]仿 Yahoo 滾動式訊息跑馬燈
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
廣告的效果就是要讓消費者購買,當然第一步就是要先能吸引人看廣告。如果各位有進入到Yahoo!奇摩首頁的話,可能很多人多少都會被那用詞超誇張的訊息跑馬燈所引誘並點擊廣告

Open in new window


雖然它只是一般的訊息跑馬燈的效果,但運用了標題式的圖示及嚇死人不償命的文字內容,就讓瀏覽者有不一樣的感受。這次筆者就來教各位如何用 jQuery 來做一個類似的跑馬燈。

首先當然是要有廣告的項目內容:


<body>
    <
div id="abgne_marquee">
        <
ul>
            <
li><a href="http://www.flycan.com.tw/course/course_javascript.php">}課快訊】04/11 JavaScript & CSS 互動{式入門班 (週日班)</a></li>
            <
li><a href="http://www.flycan.com.tw/course/course_photopro.php">}課快訊】05/09 Photoshop 影像達人專修班 (週日班)</a></li>
            <
li><a href="http://abgne.tw/site-proclamation/questionnaire-1.html">【調查】你的獎~你來決定 - 活動獎~大調查</a></li>
        </
ul>
    </
div>
</
body>


接著再用 CSS 來裝飾它,並讓畫面只能看到一筆的內容:


div
#abgne_marquee {
    
position: relative;
    
overflow: hidden;    /* 超出範圍的部份要隱藏 */
    
width: 375px;
    
height: 25px;
    
border: 1px solid #ccc;
}
div#abgne_marquee ul, div#abgne_marquee li {
    
margin: 0;
    
padding: 0;
    list-
style: none;
}
div#abgne_marquee ul {
    
position: absolute;
}
div#abgne_marquee ul li a {
    
display: block;
    
overflow: hidden;    /* 超出範圍的部份要隱藏 */
    
font-size:12px;
    
height: 25px;
    
line-height: 25px;
    
text-decoration: none;
}


其實這邊用到的 CSS 都是很常見的用法,當設計完後就能看到雛型了

Open in new window


接下來比較要注意的是程式處理的部份:


$(function(){
    
// 先取得 div#abgne_marquee ul
    // 接著把 ul 中的 li 項目再重覆加入 ul 中(等於有兩組內容)
    // 再來取得 div#abgne_marquee 的高來決定每次跑馬燈移動的距離
    // 設定跑馬燈移動的速度及輪播的速度
    
var $marqueeUl = $('div#abgne_marquee ul'),
        
$marqueeli = $marqueeUl.append($marqueeUl.html()).children(),
        
_height = $('div#abgne_marquee').height() * -1,
        
scrollSpeed = 600,
        
timer,
        
speed = 3000 + scrollSpeed;

    
// 幫左邊 $marqueeli 加上 hover 事件
    // 當滑鼠移入時停止計時器;反之則啟動
    
$marqueeli.hover(function(){
        
clearTimeout(timer);
    }, function(){
        
timer = setTimeout(showad, speed);
    });

    
// 控制跑馬燈移動的處理函式
    
function showad(){
        var
_now = $marqueeUl.position().top / _height;
        
_now = (_now + 1) % $marqueeli.length;

        
// $marqueeUl 移動
        
$marqueeUl.animate({
            
top: _now * _height
        
}, scrollSpeed, function(){
            
// 如果已經移動到第二組時...則馬上把 top 設 0 來回到第一組
            // 藉此產生不間斷的輪播
            
if(_now == $marqueeli.length / 2){
                
$marqueeUl.css('top', 0);
            }
        });

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

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

    $(
'a').focus(function(){
        
this.blur();
    });
});


因為要做到訊息跑馬燈能不間斷的輪播,所以筆者就把原來的廣告項目再完整的複製了一份並加入,這樣當訊息顯示到第二組的第一筆時,我們就能用迅雷不及掩耳的速度再把它移到第一組的第一筆,讓瀏覽者產生一種不間斷輪播的 Magic 效果。

現在做的是往上滾動的跑馬燈,若是要往下滾動的話,只要稍微修改一下程式:


$(function(){
    
// 先取得 div#abgne_marquee ul
    // 接著把 ul 中的 li 項目再重覆加入 ul 中(等於有兩組內容)
    // 再來取得 div#abgne_marquee 的高來決定每次跑馬燈移動的距離
    // 設定跑馬燈移動的速度及輪播的速度
    
var $marqueeUl = $('div#abgne_marquee ul'),
        
$marqueeli = $marqueeUl.append($marqueeUl.html()).children(),
        
_height = $('div#abgne_marquee').height() * -1,
        
scrollSpeed = 600,
        
timer,
        
speed = 3000 + scrollSpeed;

    
// 把 $marqueeUl 的 top 設為顯示到第二組內容的第一筆
    
$marqueeUl.css('top', $marqueeli.length / 2 * _height);

    
// 幫左邊 $marqueeli 加上 hover 事件
    // 當滑鼠移入時停止計時器;反之則啟動
    
$marqueeli.hover(function(){
        
clearTimeout(timer);
    }, function(){
        
timer = setTimeout(showad, speed);
    });

    
// 控制跑馬燈移動的處理函式
    
function showad(){
        var
_now = $marqueeUl.position().top / _height;
        
_now = (_now - 1 + $marqueeli.length) % $marqueeli.length;

        
// $marqueeUl 移動
        
$marqueeUl.animate({
            
top: _now * _height
        
}, scrollSpeed, function(){
            
// 如果已經移動到第一組時...則馬上把 top 設為顯示到第二組內容的第一筆
            // 藉此產生不間斷的輪播
            
if(_now == 0){
                
$marqueeUl.css('top', $marqueeli.length / 2 * _height);
            }
        });

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

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

    $(
'a').focus(function(){
        
this.blur();
    });
});


當然筆者只是用較為簡單的方式來當範例,如果再加上一點點設計就能變成帶有圖示的訊息跑馬燈:

Open in new window


相信依各位的設計能力來做的話,效果是不會輸給 Yahoo!奇摩的啦!

範例瀏覽:
http://demonstration.abgne.tw/jquery/0021/0021_1.html
http://demonstration.abgne.tw/jquery/0021/0021_2.html
http://demonstration.abgne.tw/jquery/0021/0021_3.html


2010/4/16 9:13
 









[高級搜索]


 

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

 

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

 

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

TOP

【 Flycan.com 】 Powered by XOOPS