[教學] 上下捲動網頁的效果

顯示結果從第 1 筆 到 2 筆,共計 2 筆
  1. #1
    悄悄地愛上死亡 iget 的大頭照
    註冊日期
    2000-10-11
    討論區文章
    2,454
    範例網頁:
    http://home.pchome.com.tw/home/iget1/godown.html

    評比等級:三顆星

    範例網頁下載:
    http://home.pchome.com.tw/home/iget1/godown.zip

    使用時機:只要網頁有超過一頁的長度,即可適用

    原始碼:以下原碼放在</head>之前
    步驟一:<style type=text/css>
    <!--
    body {SCROLLBAR-FACE-COLOR: #F6F6F6; SCROLLBAR-HIGHLIGHT-COLOR: #F6F6F6; SCROLLBAR-SHADOW-COLOR: #F6F6F6; SCROLLBAR-3DLIGHT-COLOR: #9999FF; SCROLLBAR-ARROW-COLOR: #9999FF; SCROLLBAR-TRACK-COLOR: #F6F6F6; SCROLLBAR-DARKSHADOW-COLOR: #9999FF;}
    #item {position:absolute; visibility:hidden; left:0px}
    -->
    </style>

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    var isNS=(document.layers);
    var _all=(isNS)? '' : 'all.' ;
    var _style=(isNS)? '' : '.style' ;
    var _visible=(isNS)? 'show' : 'visible';
    var w_x, w_y, item, okscroll=false, godown;
    function init(){
    item=eval('document.'+_all+'item'+_style);
    getwindowsize();
    item.visibility=_visible;
    scrollpage();
    }
    function getwindowsize() {
    w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;
    w_y=(isNS)? window.innerHeight : document.body.clientHeight;
    (isNS)? item.clip.width=42: item.width=42;
    (isNS)? item.clip.height=20 : item.height=20;
    moveitem();
    }
    function resizeNS() {
    setTimeout('document.location.reload()',400);
    }
    function moveitem() {
    if (isNS) {
    item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50))
    }else{
    item.pixelLeft=document.body.scrollLeft+w_x-50;
    item.pixelTop=w_y+document.body.scrollTop-230;
    }
    }
    window.onload=init;
    (isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;
    function scrollpage() {
    status = '';
    if (okscroll) {
    if (godown) {
    (isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ;
    } else {
    (isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ;
    }
    }
    moveitem();
    setTimeout('scrollpage()', 40);
    }
    // End -->
    </script>

    步驟二:以下原碼放在<BODY>之後
    <div id="item">
    <a href="javascript:void(0)" onMouseover="okscroll=true; godown=true" onMouseout="okscroll=false"><img src="icon_go_down.gif" border="0"></a>
    <a href="javascript:void(0)" onMouseover="okscroll=true; godown=false" onMouseout="okscroll=false"><img src="icon_go_up.gif" border="0"></a>
    </div>

    註:其中的黑體字部分,大家可以改看看就知道囉



  2. #2
    會員 lionel_lo 的大頭照
    註冊日期
    2001-03-30
    討論區文章
    293
    嘿嘿~~
    又學到一昭了
    加油加油~~

類似的主題

  1. 【求助】播放MP3時捲動網頁,音樂怪怪的?
    作者:tn4205 所在討論版:-- 多 媒 體 討 論 版
    回覆: 6
    最後發表: 2002-09-30, 09:29 PM
  2. [教學] 捲動式的友站連結效果
    作者:iget 所在討論版:---- 電 腦 / 網 路 軟 體 精 華 區
    回覆: 6
    最後發表: 2001-07-11, 07:11 PM

 

HTML 只上下捲動

發表文章規則

  • 不可以發表新主題
  • 不可以回覆文章
  • 不可以上傳附加檔案
  • 不可以編輯自己的文章
  •