訪客:  註冊 | 登錄 | 統計 | 幫助 | 社區功能 | 界面風格 | 繁体中文


標題: [求助] 以下語法怎修改滾動方向?
Rank: 1
用戶組 : 中級會員 [詳情]
會員 : 小舀
帖子 : 111[詳情]
UID : 34
積分 : 3036[詳情]
狀態 :
失蹤 : 24 天 [詳情]
  第 1 帖 發表於 2019-10-19 02:04 PM
以下語法,怎改向下/向左/右走?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<!-- 引用 jQuery 1.4 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<title>仿 Yahoo 滾動式訊息跑馬燈</title>
<style type="text/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;
        }
</style>
<script type="text/javascript">
        $(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();
                });
        });
</script>
</head>

<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>
<script>
(function WAU_small(b){var c="";var a="";if(document.title){a=encodeURIComponent(document.title.replace(/(\?=)|(\/)/g,""))}document.write('<img src="http://whos.amung.us/swidget/'+b+"/"+a+c+'" style="display:none;" width="80" height="15" border="0" title="在線人數" />');var d=document.createElement("script");d.src="http://waudist.tynt.com/javascripts/TyntLite.js?user="+b;d.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(d)})('ka7nizlgg070');
</script>
<script type="text/javascript">
var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-10470597-1']);_gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</html>
  
  

資料 文集 短消息 頂部

Powered by Discuz! 5.0.0  © 2001-2006 Comsenz Inc.
頁面執行時間 » 0.008804 秒 » 數據庫查詢 » 7 次 » Gzip » 已啟用
當前時區 GMT+8 , 現在時間 2019-11-14 01:10 AM - 網頁空間由 TEAMagic 提供
清除 Cookies - 聯繫我們 - 雄 之 網 頁 - Archiver - WAP