<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
    統(tǒng)計
    • 隨筆 - 74
    • 文章 - 57
    • 評論 - 7
    • 引用 - 0

    導航

    常用鏈接

    留言簿(5)

    隨筆分類

    隨筆檔案

    文章分類

    文章檔案

    相冊

    顏色

    搜索

    •  

    最新評論

    閱讀排行榜

    評論排行榜

     
     我想大家都看過各種各樣的滾動(最常用的就是用在新聞的更新上面),一般情況下只要不是圖片,都是用HTML本身就有提供一個很不錯的滾動標記——marquee來完成的(用JS也可以同樣實現(xiàn)這種效果);當然并不是說圖片就不能那樣做。
      以下為marquee的一些基本的參數(shù):
      該標記語法格式如下:
    <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>

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

      現(xiàn)在要介紹的是一種新型的滾動,利用JS的方法來做字幕的滾動:向上,在中間停頓一到兩秒(就像經(jīng)典的這種):
      將以下代碼貼到您要顯示的位置就可以了:
    <script>
    var marqueeContent=new Array(); //定義一個數(shù)組,用來存放顯示內容
    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執(zhí)行面版操作</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 實現(xiàn)選項卡式效果</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(); //定義一些常用而且要經(jīng)常用到的變量
    var marqueeId=0;
    var marqueeDelay=4000;
    var marqueeHeight=16;

    //接下來的是定義一些要使用到的函數(shù)
    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>

      以上已經(jīng)將網(wǎng)站的這種滾動的做法做了一個大概的介紹。

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

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


    網(wǎng)站導航:
     
     
    Copyright © 一天一點愛戀 Powered by: 博客園 模板提供:滬江博客
    主站蜘蛛池模板: 亚洲高清无码在线观看| 久久精品国产免费观看三人同眠| 毛片免费视频播放| 亚洲国产精品成人综合色在线婷婷 | 国产成人无码区免费内射一片色欲 | 亚洲综合日韩中文字幕v在线| 久久黄色免费网站| 久久亚洲精品无码VA大香大香| 中文字幕免费视频一| 亚洲一级毛片在线播放| 99视频在线精品免费观看6| 亚洲精品无码少妇30P| 午夜亚洲av永久无码精品| www成人免费视频| 久久精品国产精品亚洲色婷婷| 一区二区三区福利视频免费观看| 久久亚洲精品成人无码网站| 国产卡二卡三卡四卡免费网址 | 国产亚洲成AV人片在线观黄桃| 日本一卡精品视频免费| 久久精品国产亚洲AV久| 欧亚精品一区三区免费| 色偷偷亚洲男人天堂| 久久精品国产亚洲AV不卡| 久久99毛片免费观看不卡| 亚洲无砖砖区免费| 免费日本黄色网址| 久久精品国产大片免费观看| 亚洲午夜国产精品| 亚洲成a人片在线观看老师| 久久精品国产影库免费看| 亚洲av乱码一区二区三区| 四虎影库久免费视频| 日本亚洲欧洲免费天堂午夜看片女人员| 亚洲福利视频一区二区三区| 男女交性永久免费视频播放| 国产又黄又爽胸又大免费视频| 青草草在线视频永久免费| 国产精品九九久久免费视频| 亚洲大香人伊一本线| 亚洲综合另类小说色区色噜噜|