JS: скрол имитиращ marquee

[MontefuckeR]

Трябва ми нещо като marquee, но да няма това празно място като се превърти текста, а направо да си продължава...

 

[MontefuckeR]

up :arrow:

 

[I_V_O]

Нещо, което преди доста време правих, без JQuery, но си бачка желязно ;]

<html>
	<head>
		<title> Scroller </title>
		
		<style type="text/css">
			#scroller {
				width: 100px;
				height: 100px;
				position: relative;
				
				background: red;
				border: solid 3px black;
				
				overflow: hidden;
			}
			
			#s1, #s2 {
				position: absolute;
			}
		</style>
		
		<script type="text/javascript">
			// #s1 и #s2 трябва да са по-високи от #scroller, за да работи
			window.onload = function( e ){
				var scroller = document.getElementById("scroller");
				var s1 = document.getElementById("s1");
				var s2 = document.getElementById("s2");
				var f;
				
				scrollerHeight = scroller.clientHeight;
				s1Height = s1.offsetHeight;
				s2Height = s2.offsetHeight;
				
				(f = function(){
					s1.style.top = '0px';
					s2.style.top = scrollerHeight+'px';
					
					_( s1, scrollerHeight-s1Height, function(){
						_( s1, -s1Height );
						
						_( s2, 0, function(){
							s1.style.top = scrollerHeight+'px';
							
							_( s2, scrollerHeight-s2Height, function(){
								_( s2, -s2Height );
								
								_( s1, 0, function(){
									f();
								});
							});
						});
					});
				})();
				
				function _( elm, top, func ){
					var st = (new Date).getTime();
					var sv = parseFloat( elm.style.top );
					var dv = (top - sv);
					var duration = Math.abs( dv ) * 25;
					var p;
					
					var timer = setInterval( function(){
						if( (p = ((new Date).getTime() - st)/duration ) < 1 ){
							elm.style.top = sv + p*dv + 'px';
						} else {
							elm.style.top = top + 'px';
							clearInterval( timer );
							if( func ) func();
						}
					}, 7 );
				}
			};
		</script>
	</head>
	<body>
		<div id="scroller">
			<div id="s1">
				s1 <br />s1 <br />s1 <br />s1 <br />s1 <br />
				s1 <br />s1 <br />s1 <br />s1 <br />s1 <br />
				s1 <br />s1 <br />s1 <br />s1 <br />s1 <br />
				s1 <br />s1 <br />s1 <br />s1 <br />s1 <br />
				s1 <br />s1 <br />s1 <br />s1 <br />s1 <br />
				s1 <br />s1 <br />s1 <br />s1 <br />s1 <br />
			</div>
			<div id="s2">
				s2 <br />s2 <br />s2 <br />s2 <br />s2 <br />
				s2 <br />s2 <br />s2 <br />s2 <br />s2 <br />
				s2 <br />s2 <br />s2 <br />s2 <br />s2 <br />
				s2 <br />s2 <br />s2 <br />s2 <br />s2 <br />
				s2 <br />s2 <br />s2 <br />s2 <br />s2 <br />
				s2 <br />s2 <br />s2 <br />s2 <br />s2 <br />
			</div>
		</div>
	</body>
</html>

 

[madmax3]

Виж това :

http://web.geobg.info/?demo=scroler

 

[MontefuckeR]

I_V_O, това е което търся, но 2рия див, който им ид "s2", малко бърка нещата, явно съдържането трябва да го разделям в s1 и в s2, за да работи, а един фикс, за onmouseover и onmouseout да спира и да продължава можеш ли да му сложиш :roll: :roll: , ако може де...

 

[MontefuckeR]

madmax3, този вариант прекъсва загледай го и ще видиш, като свърши съдържанието остава празно за няколко секунди докато почне :roll:

 

[IzKuFeLiQqQqQ]

разгледай тук http://web-tourist.net/forum/viewtopic.php?p=540108&highlight=#540108

 

[MontefuckeR]

Случайно попаднах на една страничка която имаше такъв скрипт, малко го едитнах и е на 6 ето го:

<script>
var ScrollSpeed=1;
function findPos(obj)
{
var curleft=0;
var curtop =0;
if(obj.offsetParent) {
curleft=obj.offsetLeft;
curtop =obj.offsetTop;
while(obj=obj.offsetParent) {
curleft+=obj.offsetLeft;
curtop +=obj.offsetTop;
}
}

return [curleft,curtop];
}

function Scroller()
{
var f1 = document.getElementById('scroller1');
var f2 = document.getElementById('scroller2');
var vm=findPos(document.getElementById('scrollerFin'))[1] - findPos(f1)[1], y1=0, y2=0;
if(!f1.style.top) {
f1.style.top = '0px';
f2.style.top = vm+'px';
f2.innerHTML = f1.innerHTML;
} else {
y1=parseInt(f1.style.top); y1 = y1<(0-vm) ? vm : y1-ScrollSpeed; f1.style.top = y1+'px';
y2=parseInt(f2.style.top); y2 = y2<(0-vm) ? vm : y2-ScrollSpeed; f2.style.top = y2+'px';
}
setTimeout('Scroller()', 30);
}

window.onload = function() { Scroller(); }
</script>

<div style="position:relative;background:silver;width:150px;height:100px;overflow:hidden;" onmouseover="ScrollSpeed=0;" onmouseout="ScrollSpeed=1;">
<div id="scroller1" style="position:absolute;">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
<div id="scrollerFin"></div>
</div>
<div id="scroller2" style="position:absolute;"></div>
</div>

Скрипта прави това, което искам, и благодаря на всички отзовали се!