Форум программистов [Powered by Invision Power Board]

Код


<html>
    <head>
<script>
    
    function init(){

        // запускаем бегущую строку №1
        begun1=new begun();
        begun1.obj="runline01";
        res=begun1.start();
        if(res!==true){ alert(res); }


        // запускаем бегущую строку №2
        begun2=new begun();
        begun2.obj="runline02";
        begun2.speed=20;
        res=begun2.start();
        if(res!==true){ alert(res); }

    }
    
    
    begun = function (){
        this.obj=null; //внутри ЭТОГО объекта будет прокрутка
        this.str=null; //строка, которую будем двигать
        this.x1=0; //начальная координата
        this.x2=0; //конечная координата
        this.speed=10; //время в миллисек, за которое трока будет смещаться на this.step
        this.step=1; //шаг смещения
        this.dx=0; //текущее смещение
        this.tlcss="text"; //имя класса обозначающее текстовую строку внутри области прокрутки
        this.loopId;
        
        this.start = function(){
            //если объект указан в качестве текстовой метки, то делаем из нее объект
            if(typeof(this.obj)=="string"){
                if(typeof(document.getElementById(this.obj))=="object"){
                    this.obj=document.getElementById(this.obj);
                }else{ erm="id = «"+this.obj+"» не является объектом."; }
            }else if(typeof(this.obj)!="object"){ erm="Указанный контейнер, не может быть «прокручен»"; }
            if(typeof(erm)!="undefined"){ return erm; }
            
            //ищем в контейнере поле с классом this.tlcss
            for(i in this.obj.childNodes){
                if(typeof(this.obj.childNodes[i].className) && this.obj.childNodes[i].className==this.tlcss){
                    this.str=this.obj.childNodes[i];
                }
            }
            if(this.str==null){ return "Строка в контейнере не обнаружена"; }
            
            //инициализируем значения
            this.x1=this.obj.scrollWidth-100;
            this.x2=0-this.str.scrollWidth;
            
            //замены в тексте
            //пробел на &nbsp;
            t2=this.str.innerHTML.split(" ");
            this.str.innerHTML=t2.join("&nbsp;");
            //знак "-" на &minus;
            t2=this.str.innerHTML.split("-");
            this.str.innerHTML=t2.join("&minus;");
            
            t1=this;
            this.loopId=setInterval(function(){ t1.run(); },this.speed);
//            this.run();
            return true;
        }
        
        //смещение и отображение
        this.run = function(){
            //сдвигаем на экране
            this.str.style.left=this.x1-this.dx+"px";
            //если надо, то показываем строку
            if(this.dx==0){ this.str.style.visibility="visible"; }
            //пересчитываем смещение
            this.dx+=this.step;
            //когда смещение доходит до конца, возвращаем в начало
            if((this.x1-this.dx)<this.x2){ this.dx=0; }

//            t1=this;
//            this.loopId=setTimeout(function(){ t1.run(); },this.speed);
        }
    }
    
</script>
<style>

.begun{
    position: relative;
    background-color: red;
    overflow: hidden;
    line-height: 25px;
    height: 25px;
}
.begun .text{
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    font-family: arial;
    color: yellow;
    visibility: hidden;
}
    
</style>
    </head>
    <body onLoad="init();">
        <div id="runline01" class="begun">
            <div class="text">Наша компания специализируется на оптово-розничной торговле товарами для животных, включая ветеринарные препараты (лицензия на фармацевтическую деятельность №хххххх). Наш рынок сбыта включает в себя РФ и страны СНГ.
</div>
        </div>
        <br />
        <div id="runline02" class="begun">
            <div class="text">1234567890-=!@#$%^&*()_+</div>
        </div>
    </body>
</html>

Цитата(bars80080 @ 3.10.2009, 20:52

)

вам достаточно всего лишь подставлять вместо this.loopId каждый раз новую переменную

Код


<html>
    <head>
<script>
    
    looprun = function(){
        begun1.run();
        begun2.run();
    }

    function init(){

        // запускаем бегущую строку №1
        begun1=new begun();
        begun1.obj="runline01";
        res=begun1.init();
        if(res!==true){ alert(res); }


        // запускаем бегущую строку №2
        begun2=new begun();
        begun2.obj="runline02";
        begun2.speed=20;
        res=begun2.init();
        if(res!==true){ alert(res); }
        
        interv1=setInterval(looprun,20);
    }
    
    
    begun = function (){
        this.obj=null; //внутри ЭТОГО объекта будет прокрутка
        this.str=null; //строка, которую будем двигать
        this.x1=0; //начальная координата
        this.x2=0; //конечная координата
        this.speed=10; //время в миллисек, за которое трока будет смещаться на this.step
        this.step=1; //шаг смещения
        this.dx=0; //текущее смещение
        this.tlcss="text"; //имя класса обозначающее текстовую строку внутри области прокрутки
        this.loopId;
        
        this.init = function(){
            //если объект указан в качестве текстовой метки, то делаем из нее объект
            if(typeof(this.obj)=="string"){
                if(typeof(document.getElementById(this.obj))=="object"){
                    this.obj=document.getElementById(this.obj);
                }else{ erm="id = «"+this.obj+"» не является объектом."; }
            }else if(typeof(this.obj)!="object"){ erm="Указанный контейнер, не может быть «прокручен»"; }
            if(typeof(erm)!="undefined"){ return erm; }
            
            //ищем в контейнере поле с классом this.tlcss
            for(i in this.obj.childNodes){
                if(typeof(this.obj.childNodes[i].className) && this.obj.childNodes[i].className==this.tlcss){
                    this.str=this.obj.childNodes[i];
                }
            }
            if(this.str==null){ return "Строка в контейнере не обнаружена"; }
            
            //инициализируем значения
            this.x1=this.obj.scrollWidth+10;
            this.x2=0-this.str.scrollWidth;
            
            //замены в тексте
            //пробел на &nbsp;
            t2=this.str.innerHTML.split(" ");
            this.str.innerHTML=t2.join("&nbsp;");
            //знак "-" на &minus;
            t2=this.str.innerHTML.split("-");
            this.str.innerHTML=t2.join("&minus;");
            
//            t1=this;
//            this.loopId=setInterval(function(){ t1.run(); },this.speed);
//            this.run();

/*            looprun.run1=function(){
                
            }*/
            return true;
        }
        
        //смещение и отображение
        this.run = function(){
            //сдвигаем на экране
            this.str.style.left=this.x1-this.dx+"px";
            //если надо, то показываем строку
            if(this.dx==0){ this.str.style.visibility="visible"; }
            //пересчитываем смещение
            this.dx+=this.step;
            //когда смещение доходит до конца, возвращаем в начало
            if((this.x1-this.dx)<this.x2){ this.dx=0; }

//            t1=this;
//            this.loopId=setTimeout(function(){ t1.run(); },this.speed);
        }
    }
    
</script>
<style>

.begun{
    position: relative;
    background-color: red;
    overflow: hidden;
    line-height: 25px;
    height: 25px;
}
.begun .text{
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    font-family: arial;
    color: yellow;
    visibility: hidden;
}
    
</style>
    </head>
    <body onLoad="init();">
        <div id="runline01" class="begun">
            <div class="text">Наша компания специализируется на оптово-розничной торговле товарами для животных, включая ветеринарные препараты (лицензия на фармацевтическую деятельность №хххххх). Наш рынок сбыта включает в себя РФ и страны СНГ.
</div>
        </div>
        <br />
        <div id="runline02" class="begun">
            <div class="text">1234567890-=!@#$%^&*()_+</div>
        </div>
    </body>
</html>