Форум PHP программистов > Тормозит карусель

[ Поиск ] - [ Пользователи ] - [ Календарь ]

kollega

26.03.2012 - 08:29

Здраствуйте форумчане. Вообщем мне нужно сделать так, чтобы блок Div начинал сколлиться, если указатель мыши приближается к его левой или правой границе ближе чем на 50 пикселов. Я нашел такое решение:


<html>

<head>
    <title>Div Scrolling</title>
    <style type="text/css">
        #mydiv{
            width: 200px;
            background-color: red;
            overflow-x: hidden;
        }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        var timer;
        function leftScroll(){
            document.getElementById("mydiv").scrollLeft -= 1;
        }
        function rightScroll(){
            document.getElementById("mydiv").scrollLeft += 1;
        }
        function horizontalScroll(evt){
            clearInterval(timer);
            var pos = $("#mydiv").position();
            if(evt.pageX < pos['left'] + 50){
               timer = setInterval(leftScroll, 10);
           }
           if(evt.pageX > pos['left'] + $("#mydiv").width() - 50){
                timer = setInterval(rightScroll, 10);
            }
        }
        $(document).ready(function(){
            $("#mydiv").bind("mouseover", function(){
                $("#mydiv").bind("mousemove", horizontalScroll);
            });
            $("#mydiv").bind("mouseout", function(){
                clearInterval(timer);
                $("#mydiv").unbind("mousemove", horizontalScroll);
            });
        });
    </script>
</head>

<body>
    <div id="mydiv">
        aaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffffffffffffffffff ffffffffffffff
</body>

</html>

Но оно очень сильно тормозит. setInterval выставлен на 10 милисикунд, а он тормозит. Помогите исправить тормоза.

Спустя 8 часов, 14 минут, 5 секунд (26.03.2012 - 15:43) redreem написал(а):

вот побаловался, пока баловался - пришел в голову алгортимик, реализую чуть позже, а пока - баловство:

<!DOCTYPE HTML>
<html>
<head>

	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>octoAutoScroll</title>
	<script type="text/javascript" src="/js/jquery162.js"></script>

</head>
<body>

<div style="width:1000px;margin:0 auto;background:#fdd">
	
	<div id="mydiv1" style="position:relative;width:400px;height:100px;left:20px;overflow:auto;margin:40px 0;margin-left:10px;background:#dfd">
        aaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffffffffffffffffff ffffffffffffffaaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffff ffffffffffffffffffffffffffff
        aaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffffffffffffffffff ffffffffffffffaaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffff ffffffffffffffffffffffffffff
        aaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffffffffffffffffff ffffffffffffffaaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffff ffffffffffffffffffffffffffff
	</div>
	
	<div id="mydiv2" style="width:700px;height:100px;overflow:auto;margin:40px 0;background:#ddf">
        aaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffffffffffffffffff ffffffffffffffaaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffff ffffffffffffffffffffffffffff
        aaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffffffffffffffffff ffffffffffffffaaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffff ffffffffffffffffffffffffffff
        aaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffffffffffffffffff ffffffffffffffaaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffff ffffffffffffffffffffffffffff
	</div>
	
	Интервалы:
	<div id="imonitormydiv1">1</div>
	<div id="imonitormydiv2">2</div>
	<br>
	<br>
	Чекеры:
	<div id="cmonitormydiv1">1</div>
	<div id="cmonitormydiv2">2</div>

</div>

	<script type="text/javascript">
	
		var octoAutoScroller = $OAS = {
			
			div:new Array(),
			
			getLeft:function(el) {
				var x = el.offsetLeft;
				if (el.offsetParent) x += this.getLeft(el.offsetParent);
				return x;
			},

			autoScroll:function ( id) {
				
				var el = document.getElementById(id);
				
				var sL = el.scrollLeft;
				el.scrollLeft = sL + $OAS.div[id].dir;
				var t = new Date().getTime();
				
				$('#imonitor'+id).html('dir: ' + $OAS.div[id].dir + ' ' +t);
				$('#imonitor'+id).html('dir: ' + $OAS.div[id].dir + ' ' +t);
				
			},
			
			checkEvent:function (e, id) {

				var left = this.getLeft(document.getElementById(id));
				
				var el = $('#'+id);
		
				var width = el.width();
				var midX = left  + Math.floor(width / 2);
				
				$('#cmonitor'+id).html('id='+id+' | mX='+e.pageX+' | left='+left);
				
				if ((e.pageX < left) || (e.pageX > left + width) || ((e.pageX > left + this.div[id].border)  && (e.pageX < left + width - this.div[id].border))) {
					
					clearInterval(this.div[id].interval);
					this.div[id].interval = false;
					return;
					
				}
								
				var weigth = (e.pageX - midX) / midX;
				
				this.div[id].dir = Math.floor(this.div[id].maxWeigth * weigth);
				
				this.div[id].interval = setInterval( "$OAS.autoScroll('"+id+"')", this.div[id].delay );
				
			},
			
			bind:function (id, p) {
				
				this.div[id] = {
					interval:false,
					el:false,
					dir:0,
					delay:50,  //этот параметр менять смысла нет. 40 - оптимально
					maxWeigth:10, //коэффициент скорости - чем больше, тем быстрее будет ускоряться прокрутка при приближении к краю
					border:50 //расстояние от края, когда начинается скроллthis.param;
				}
				
				for (var i in p)  this.div[id][i] = p[i];
				
				this.div[id].el = $('#' + id);
				
				this.div[id].el.bind( 'mousemove', function() { 
				
					$OAS.checkEvent( event, id );
					
				});
		
			}
		}
		
		
		$(document).ready(function(){

			$OAS.bind('mydiv1', {border:100, maxWeigth:5, delay:100});
			$OAS.bind('mydiv2', {border:200, maxWeigth:4});
			
		});
		
	</script> 
	
</body>
</html>

Спустя 17 часов, 7 минут, 44 секунды (27.03.2012 - 08:51) kollega написал(а):

redreem, это все хорошо, но как остановить при отведении мыши с этих 50px, да так, чтобы не глючило. Потому что если убрать строку:

clearInterval(timer);

'
из моего кода, то перестает тормозить и работает нормально.

Спустя 1 час, 46 минут, 50 секунд (27.03.2012 - 10:37) redreem написал(а):

какую строчку ты убираешь? их у тебя 2.

Спустя 54 минуты, 34 секунды (27.03.2012 - 11:32) kollega написал(а):

redreem
вот от сюда:

function horizontalScroll(evt){
            clearInterval(timer);
            var pos = $("#mydiv").position();
            if(evt.pageX < pos['left'] + 50){
               timer = setInterval(leftScroll, 10);
           }
           if(evt.pageX > pos['left'] + $("#mydiv").width() - 50){
                timer = setInterval(rightScroll, 10);
            }
        }

Спустя 1 час, 6 минут, 37 секунд (27.03.2012 - 12:39) redreem написал(а):

вот тут еще:

$("#mydiv").bind("mouseout", function(){
                clearInterval(timer);
                $("#mydiv").unbind("mousemove", horizontalScroll);
            });

попробуй местами поменять:

$("#mydiv").bind("mouseout", function(){
 $("#mydiv").unbind("mousemove", horizontalScroll);               
 clearInterval(timer);
               
            });

а то ты чистишь интервал, а потом чуть двинул мышку и он опять запускался.

Спустя 4 дня, 4 часа, 47 минут, 33 секунды (1.04.2012 - 17:26) kollega написал(а):

redreem
в твоем примере все круто, но почему-то не срабатывает остановка, после отведения курсора от края. Как исправить?

Спустя 47 минут, 29 секунд (1.04.2012 - 18:14) redreem написал(а):

kollega

да не, там все сырое, на продакшн его не поставиш. чисто побаловаться, а на продакшн - надо переписывать все по уму.

Быстрый ответ:

Здесь расположена полная версия этой страницы.