<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    我的人生路  
    日歷
    <2005年7月>
    262728293012
    3456789
    10111213141516
    17181920212223
    24252627282930
    31123456
    統計
    • 隨筆 - 74
    • 文章 - 57
    • 評論 - 7
    • 引用 - 0

    導航

    常用鏈接

    留言簿(5)

    隨筆分類

    隨筆檔案

    文章分類

    文章檔案

    相冊

    顏色

    搜索

    •  

    最新評論

    閱讀排行榜

    評論排行榜

     
     我想大家都看過各種各樣的滾動(最常用的就是用在新聞的更新上面),一般情況下只要不是圖片,都是用HTML本身就有提供一個很不錯的滾動標記——marquee來完成的(用JS也可以同樣實現這種效果);當然并不是說圖片就不能那樣做。
      以下為marquee的一些基本的參數:
      該標記語法格式如下:
    <marquee
    aligh=left|center|right|top|bottom
    bgcolor=#n
    direction=left|right|up|down
    behavior=type
    height=n
    hspace=n
    scrollamount=n
    Scrolldelay=n
    width=n
    VSpace=n
    loop=n>內容</marquee>

      下面解釋一下各參數的含義:
      align:是設定活動字幕的位置,除了居左、居中、居右三種位置外,又增加靠上(top)和靠下(bottom)兩種位置。
      Bgcolor:用于設定活動字幕的背景顏色,可以使用英文的單詞也可以是十六進制數的。
      Direction:用于設定活動字幕的滾動方向是向左(left)、向右(right)、向上(up)、向下(down)。
      Behavior:用于設定滾動的方式,主要由三種方式:
    behavior="scroll"表示由一端滾動到另一端;
    behavior="slide":表示由一端快速滑動到另一端,且不再重復;
    behavior="alternate"表示在兩端之間來回滾動。
      Height:用于設定滾動字幕的高度。
      Width:則設定滾動字幕的寬度。
      Hspace和vspace:分別用于設定滾動字幕的左右邊框和上下邊框的寬度。
      Scrollamount:用于設定活動字幕的滾動距離。數值越小,滾動的速度就越快。
      scrolldelay:用于設定滾動兩次之間的延遲時間,數值越小,間隔就越小。
      Loop:用于設定滾動的次數,當loop=-1表示一直滾動下去,直到頁面更新。其中默認情況是向左滾動無限次,字幕高度是文本高度;滾動范圍:水平滾動的寬度是當前位置的寬度;垂直滾動的高度是當前位置的高度。

      現在要介紹的是一種新型的滾動,利用JS的方法來做字幕的滾動:向上,在中間停頓一到兩秒(就像經典的這種):
      將以下代碼貼到您要顯示的位置就可以了:
    <script>
    var marqueeContent=new Array(); //定義一個數組,用來存放顯示內容
    marqueeContent[0]='<A href="#" onclick="reinitMarquee()">刷新最新列表</FONT></A>';
    marqueeContent[1]='<a href=http://www.blueidea.com/updatelist.asp target=_blank>站點最新更新六十條</a>';
    marqueeContent[2]='<A href=http://www.blueidea.com/tech/graph/2003/875.asp target=_blank>羽毛效果制作教程</a>';
    marqueeContent[3]='<A href=http://www.blueidea.com/tech/program/2003/831.asp target=_blank>MySQL&ASP</a>';
    marqueeContent[4]='<A href=http://www.blueidea.com/tech/web/2003/874.asp target=_blank>初步了解CSS3</a>';
    marqueeContent[5]='<A href=http://www.blueidea.com/tech/graph/2003/864.asp target=_blank>Fireworks MX 2004執行面版操作</a>';
    marqueeContent[6]='<A href=http://www.blueidea.com/tech/graph/2003/872.asp target=_blank>Fireworks MX 2004等高漸變填充</a>';
    marqueeContent[7]='<A href=http://www.blueidea.com/photo/gallery/2003/873.asp target=_blank>瓶子里的花</a>';
    marqueeContent[8]='<A href=http://www.blueidea.com/tech/graph/2003/871.asp target=_blank>Fireworks MX 實現選項卡式效果</a>';
    marqueeContent[9]='<A href=http://www.blueidea.com/photo/gallery/2003/870.asp target=_blank>情侶:黑白的愛情空氣</a>';
    marqueeContent[10]='<A href=http://www.blueidea.com/tech/graph/2003/866.asp target=_blank>制作 MAC 風格的蘋果標志</a>';
    marqueeContent[11]='<A href=http://www.blueidea.com/tech/graph/2003/868.asp target=_blank>蛋殼制作及破殼而出的人物合成</a>';

    var marqueeInterval=new Array(); //定義一些常用而且要經常用到的變量
    var marqueeId=0;
    var marqueeDelay=4000;
    var marqueeHeight=16;

    //接下來的是定義一些要使用到的函數
    Array.prototype.random=function() {
    var a=this;
    var l=a.length;
    for(var i=0;i<l;i++) {
    var r=Math.floor(Math.random()*(l-i));
    a=a.slice(0,r).concat(a.slice(r+1)).concat(a[r]);
    }
    return a;
    }
    function initMarquee() {
    marqueeContent=marqueeContent.random();
    var str='';
    for(var i=0;i<Math.min(3,marqueeContent.length);i++) str+=(i>0?'  ':'')+marqueeContent[i];
    document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');
    marqueeId+=2;
    if(marqueeContent.length>3)marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
    }
    function reinitMarquee() {
    js_scroll_content.src='scroll_content2.js';
    marqueeContent=marqueeContent.random();
    var str='';
    for(var i=0;i<Math.min(3,marqueeContent.length);i++) str+=(i>0?'  ':'')+marqueeContent[i];
    marqueeBox.childNodes[(marqueeBox.childNodes.length==1?0:1)].innerHTML=str;
    marqueeId=2;
    }
    function startMarquee() {
    var str='';
    for(var i=0;(i<3)&&(marqueeId+i<marqueeContent.length);i++) {
    str+=(i>0?'  ':'')+marqueeContent[marqueeId+i];
    }
    marqueeId+=3;
    if(marqueeId>marqueeContent.length)marqueeId=0;

    if(marqueeBox.childNodes.length==1) {
    var nextLine=document.createElement('DIV');
    nextLine.innerHTML=str;
    marqueeBox.appendChild(nextLine);
    }
    else {
    marqueeBox.childNodes[0].innerHTML=str;
    marqueeBox.appendChild(marqueeBox.childNodes[0]);
    marqueeBox.scrollTop=0;
    }
    clearInterval(marqueeInterval[1]);
    marqueeInterval[1]=setInterval("scrollMarquee()",20);
    }
    function scrollMarquee() {
    marqueeBox.scrollTop++;
    if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){
    clearInterval(marqueeInterval[1]);
    }
    }
    initMarquee();
    </script>

      以上已經將網站的這種滾動的做法做了一個大概的介紹。

    歡迎大家訪問我的個人網站 萌萌的IT人
    posted on 2005-07-29 11:39 一天一點愛戀 閱讀(446) 評論(0)  編輯  收藏

    只有注冊用戶登錄后才能發表評論。


    網站導航:
     
     
    Copyright © 一天一點愛戀 Powered by: 博客園 模板提供:滬江博客
    主站蜘蛛池模板: 亚洲精品国产精品国自产观看| 亚洲国产精品久久| 亚洲av永久无码精品秋霞电影秋| 黄网站色视频免费观看45分钟| 在线观看免费播放av片| 午夜时刻免费入口| 亚洲国产精品精华液| 免费观看国产精品| 一区二区视频在线免费观看| 久久久久久久亚洲精品| 狠狠色伊人亚洲综合网站色| 光棍天堂免费手机观看在线观看 | 中文在线观看免费网站| 嘿嘿嘿视频免费网站在线观看| 国产成人涩涩涩视频在线观看免费 | 亚洲爆乳无码专区| 国产亚洲成在线播放va| 亚洲精品456播放| 中文无码成人免费视频在线观看| 亚洲人成网址在线观看| 国产一卡2卡3卡4卡2021免费观看 国产一卡2卡3卡4卡无卡免费视频 | 无码av免费毛片一区二区| 97se亚洲国产综合自在线| 国产v片免费播放| 欧洲人免费视频网站在线| 国产成人精品久久亚洲| 免费观看91视频| 亚洲精品第一综合99久久| 免费在线观看黄网| 少妇太爽了在线观看免费视频| 67194在线午夜亚洲| 亚洲欧洲国产成人综合在线观看| 好紧我太爽了视频免费国产| 亚洲13又紧又嫩又水多| 亚洲AV无码乱码在线观看牲色| 久久久久国产精品免费看| 亚洲AV无码一区二区大桥未久| 亚洲色无码专区在线观看| 国产亚洲免费的视频看| 亚洲欧洲无卡二区视頻| 午夜私人影院免费体验区|