Jscript Скроллер

by Andrey Dobrovoi

HTML

<div class="mask">
    <div class="header">
	</div> 
    <div class="colleft">
	    <div class="col1">    	      
<h3>Demo of multi-row vertical scroller - not equal height</h3>
 <p>After one cycle of moving, the scroller returns to its start point and start another cycle. There's no appending extra nodes.
 </p>
<p> The height of each items could be different.
</p>    	   
        </div>
	    <div class="col2">    
<div class="container">
  <ul style="height: 333px; top: 43px;" id="newsticker">
  
    <li><h4><a href="http://www.pagecolumn.com/webparts/ticker.htm"> How to make news tickers</a></h4>
     <p>Tutorial to design news tickers in Javascript. Demos with fadeOut, delay and BBC style ...</p>
     </li>  
    <li><h4><a href="http://www.pagecolumn.com/javascript/fade.htm">fadeIn and fadeOut</a></h4>
    <p>A simple javascript object for fadeIn and fadeOut effect. Use like jQuery with callback function.</p>
    </li>  
    <li><h4><a href="http://www.pagecolumn.com/javascript/drag_list.htm">drag the list</a></h4>
    <p>Application of <a href="http://www.pagecolumn.com/javascript/drag_drop.htm">drag and drop</a>. Drag to change the order of a list
   of items</p>
    </li>  

 </ul>

</div>
	        
	    </div> 
	</div>
	    
    
    </div>

CSS

.mask{
   position: relative;
   overflow: hidden;
   margin: 0px auto;
   width: 98%;
}
.header{
   float: left;
   width: 100%;
  
}
.colleft{
   position: relative;
   width: 100%;
   right: 78%;
}
.col1{
   position: relative;
   overflow: hidden;
   float: left;
   width: 77%;
   left: 100.5%;
}
.col2{
   position: relative;
   float: left;
   width: 21%;
   left: 1.5%;
}
.footer{
   float: left;
   width: 100%;
}
body {
   padding: 0px;
   margin: 0px;
   font-size: 90%;
}
.container { 
     position:relative;
     width:100%;overflow:hidden; 
     border: 1px solid #445566;
     height:360px;margin: 10px 0;
     background-color:#d8bfd8;
    
}

#newsticker,#newsticker0 {
    list-style-type: none;
	margin:0;
	padding:0;
	height: 30000px;
    position:relative;	
}
#newsticker li,#newsticker0 li{
    position:relative;
    padding:5px;
    border-top: 1px solid #445566;
    width:100%
}

.land{width:750px; margin-bottom:20px}
a{color:blue;text-decoration:none;}
 a:hover{color:#c00000}
 
li h4{margin:5px;padding:0}
li p{margin:5px}
.col1 p,.col1 h3{margin-left:10px;width:60%}

JavaScript

function getstyle(elem, prop) {
		if(document.defaultView)
		{
			return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop);
		}
		else if(elem.currentStyle)
		{
			var prop = prop.replace(/-(\w)/gi, function($0,$1)
			{
				//return $0.charAt($0.length - 1).toUpperCase();
				return $1.toUpperCase();
			});
			return elem.currentStyle[prop];
		}
		else return null;
	}
Function.prototype.bind = function(obj) {	
    var _method = this;
    return function() {
        return _method.apply(obj, arguments);
    };    
} 	

var ttt = [];
	
function $(id) {
var $ =  (typeof id  =="string") ? document.getElementById(id) : id;
$.start ={};

$.stop = function(){
     for (i in ttt) {
        clearTimeout(ttt[i]);
     }
};

$.move = function(settings,callbk) {
    var _this = this;
    var left = getstyle(_this,"left");
    var top =  getstyle(_this,"top");
 
     _this.start.left = (left=="auto") ? 0 : parseInt(left);
    _this.start.top = (top=="auto") ? 0 : parseInt(top);
    
    if (settings.to.left == _this.start.left) {  // y 
        var descend = (settings.to.top>_this.start.top) ? false : true;
        var s = Math.min(_this.start.top,settings.to.top);
        var d = Math.max(_this.start.top,settings.to.top);
        for (i = s; i <= d; i++) {
          (function(j) {
                var delay = (descend==true) ? (d-j)*settings.delay/(d - s) : (j-s)*settings.delay/(d - s); 
                ttt[j] = setTimeout(function() {  
                      
                      _this.style.top = j+"px";
                      if (descend==false&&j==d&&callbk!=undefined) {callbk.call(_this);}
                      else if (descend==true&&callbk!=undefined&&j==s) {callbk.call(_this);}
                      },delay);
                     
            })(i); 
          
        }
    
    }
    
    else {
        
        var descend = (settings.to.left>_this.start.left) ? false : true;
        var s = Math.min(_this.start.left,settings.to.left);
      ...