28、字幕滚动效果

28、字幕滚动效果

<html>

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>网页特效---字幕滚动效果(二)</title>

</head>

 

<body>

 

 

<script type="text/javascript">

 

    //<![CDATA[

 

    <!--

 

    function scrollerObj(name,initH,initW,heightB,widthB,content,initBg,Bg,speed,initFl){

 

    //**data**//

 

    this.name=name;

 

    this.initH=initH;

 

    this.initW=initW;

 

    this.heightB=heightB;

 

    this.widthB=widthB;

 

    this.content=content;

 

    this.initBg=initBg;

 

    this.Bg=Bg;

 

    this.iniFl=initFl;

 

    this.speed=parseInt(speed);

 

    this.timer = name + "Timer";

 

    this.elem;

 

 

 

 

 

    //**methods**//

 

    this.getElement = getElement;

 

    this.createLayer=createLayer;

 

    this.scrollLayer = scrollLayer;

 

    this.scrollLoop=scrollLoop;

 

 

 

    //**initiate methods**//

 

    this.createLayer();

 

    this.getElement();

 

    this.scrollLayer();

 

    }

 

 

 

    //**call this method to stop scrolling**//

 

    function scrollLoop(s){

 

    this.speed = s;

 

    }

 

 

 

    //**pretty obvious**//

 

    function scrollLayer(){

 

    if(parseInt(this.elem.style.top)>(this.elem.offsetHeight*(-1))){

 

        this.elem.style.top = parseInt(this.elem.style.top)-this.speed;

 

        //alert(parseInt(this.elem.style.top)+"\n"+this.elem.id);

 

    }

 

    else {this.elem.style.top = this.initH;}

 

    }

 

 

 

    //**get the specific dom-expression**//

 

    function getElement(){

 

    if(document.getElementById){

 

        this.elem = document.getElementById(this.name);

 

        }

 

    else if (document.all){

 

    this.elem = document.all[name];

 

        }

 

    else if (document.layers){

 

    this.elem = document.layers[name];

 

        }

 

    }

 

 

 

    //**pretty obvious - if NS4 - please upgrade to a standard compliant browser**//

 

    function createLayer(){

 

    if(document.getElementById || document.all){

 

    document.write('<div id="layer'+this.name+'" style="position:relative;overflow:hidden;float:'+this.initFl+';background-color:#'+this.initBg+';border:1px solid black;width:'+this.initW+'px;height:'+this.initH+'px;" onMouseover="'+this.name+'.scrollLoop(0)" onMouseout="'+this.name+'.scrollLoop('+this.speed+')">');

 

    document.write('<div id="'+this.name+'" style="position:absolute;top:'+this.initH+'px;left:0px;border:0px solid black;width:'+this.widthB+'px;height:'+this.heightB+'px;background-color:#'+this.Bg+'">');

 

    document.write(this.content);

 

    document.write('<\/div><\/div>');}

 

    else if(document.layers){

 

        document.write('<ilayer name="'+this.name+'" bgcolor="#'+this.Bg+'" width="'+this.widthB+'" height="'+this.heightB+'">'+this.content+'<\/ilayer>');

 

        return;

 

    }

 

    if(this.scrollLayer){

 

      this.timer = setInterval(this.name+'.scrollLayer()','30');

 

    }

 

    }

 

 

 

    //-->

 

 

 

 

 

    //]]>

 

    </script>

 

    <style media="screen" type="text/css">

 

    /*<![CDATA[*/

 

    <!--

 

    P{color:#465d5c;margin:3px;}

 

    A{color:#e86500}

 

    H1{color:#465d5c;font-size:11px;font-weight:normal;font-weight:bold;font-size:11px;font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;margin:3px; padding:0px}

 

    H2{color:#465d5c;font-size:11px;font-weight:bold;font-size:11px;font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;margin:3px; padding:0px}

 

    .art{font-weight:normal;font-size:11px;font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;width:100%;border-top:1px solid #FFFFFF;border-bottom:1px solid #FF7F00; padding:3px;margin-bottom:10px;text-align: justify;}

 

    .state{color:#e86500;margin-left:5px;margin-right:5px;}

 

    #art1{background-color:#FFBB00;}

 

    #art2{background-color:#FFCC00;}

 

    #art3{background-color:#FFDD00;}

 

    #art4{background-color:#FFEE00;}

 

    #main{background-image: url(img/bg_px_3.gif);background-color: #cc6600;width:600px;padding-bottom:75px;border:1px solid white}

 

    #logo{margin-left:10px; margin-top:3px; margin-bottom:10px; font-weight:bold;font-size:11px;font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;width:100%;}

 

    #date{font-size:9px; font-family:Arial,Helvetica,Geneva,Swiss,SunSans-Regular;color:#545454}

 

 

 

    -->

 

    /*]]>*/

 

    </style>

 

<div align="center">

 

        <script type="text/javascript">

 

        //<![CDATA[

 

        <!--

 

        var c = new scrollerObj('c','200','200','200','200','<h1>滚动新闻<\/h1><p>本站提供最新免费网页制作特效代码,包括鼠标类网页特效代码,文字类网页特效代码,菜单类网页特效代码,背景类网页特效代码等。非常精彩,都经过站长的精心挑选,绝对使你满意!本站大部分网页特效代码来自网上,若有侵权,请来函 ,站长一经查实立刻删除!网页特效代码本着以人为本,服务大众,力求免费为各站长的网上小屋添砖加瓦,你的满意是我最大的幸福,你的意见是我最大的财富! <a href="mailto:webm0101aster@n.one.port5.com">mail me<\/a><\/p>','FFDD00','cccccc','2','center');//修改背景和滚动字幕的宽度、高度和颜色

 

        //-->

 

        //]]>

 

        </script>

 

</div>

 

</body>

 

</html>

 

Write a comment

Comments: 0