<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: 博客園 模板提供:滬江博客
    主站蜘蛛池模板: 五月天网站亚洲小说| 亚洲精品国产精品乱码不卡√| 无码国产精品一区二区免费式影视| 24小时日本韩国高清免费| 成人免费AA片在线观看| 国产高清在线精品免费软件| 亚洲AV无码一区二区三区国产| 在线播放亚洲第一字幕| 亚洲国产精品网站久久| 亚洲AV无码成人精品区狼人影院| 亚洲免费在线观看| 中文字幕免费在线看线人| 久久久久噜噜噜亚洲熟女综合| 亚洲天堂2017无码中文| 国产免费黄色无码视频| 可以免费看黄视频的网站| 国产日本亚洲一区二区三区| 在线观看成人免费| 无码乱人伦一区二区亚洲| 免费人成视频在线观看网站| 四虎影院永久免费观看| 亚洲一欧洲中文字幕在线| 伊人免费在线观看| 国产大片91精品免费看3| 一级成人a做片免费| 野花高清在线观看免费3中文| 亚洲熟妇无码一区二区三区| 99免费在线观看视频| 日韩亚洲人成在线| 黄色网址免费观看| 亚洲影院在线观看| 中国一级特黄的片子免费 | 日韩免费观看视频| 亚洲天堂电影在线观看| 午夜高清免费在线观看| 一级毛片视频免费观看| 亚洲精品综合久久中文字幕| 最近中文字幕mv免费高清在线 | 亚洲国产精品不卡毛片a在线| 精品免费tv久久久久久久| 免费在线观看理论片|