2011年5月2日 星期一

取代 Marquee 的跑馬燈程式

下列都是自動捲動,只有滑鼠遊標在上面時才會停...

捲動的是 ul li,每次捲一列 li,每一列都是無法換行的,適合簡短的文字。
http://vlab.info/pages/jquery.scrollbox.html

連續往上捲動 div
http://www.sosuo8.com/article/show.asp?id=318
試後發現,捲兩回合後會閃一下,跳回開頭來繼續捲...
改良 "閃一下" 的問題: 加了新變數 nLastPos...

        var nLastPos = 0;
        var stopscroll = false;
        var scrollElem = document.getElementById("andyscroll");
        var marqueesHeight = scrollElem.style.height;
        scrollElem.onmouseover = new Function('stopscroll = true');
        scrollElem.onmouseout = new Function('stopscroll = false');
        var preTop = 0;
        var currentTop = 0;
        var stoptime = 0;
        var leftElem = document.getElementById("scrollmessage");
        //scrollElem.appendChild(leftElem.cloneNode(true));
        init_srolltext();

        function init_srolltext() {
            scrollElem.scrollTop = 0;
            setInterval('scrollUp()', 25); //延遲時間 ms
        }
        function scrollUp() {
            if (stopscroll) return;
            currentTop += 2; //很妙,改成 1 ,可以變成閒歇性的捲
            if (currentTop == 19) {
                stoptime += 1;
                currentTop -= 1;
                if (stoptime == 180) {
                    currentTop = 0;
                    stoptime = 0;
                }
            } else {
                preTop = scrollElem.scrollTop;
                scrollElem.scrollTop += 1;
                if (preTop == scrollElem.scrollTop) {//捲不動了,表示盡頭
                    //if (CB_Dconsole) console.log(preTop);
                    //scrollElem.scrollTop = 0;
                    //scrollElem.scrollTop += 1;
                    if (nLastPos == 0) {//第一次需要複製一份在後面,好繼續捲下去
                        nLastPos = preTop;
                        scrollElem.appendChild(leftElem.cloneNode(true));
                    }
                    else {//第二次到盡頭時,跳到上一次的盡頭,重新捲
                        scrollElem.scrollTop = nLastPos;
                    }
                }
            }
        }

沒有留言:

張貼留言

歡迎留言指教