Я пытался сделать новостную ленту. Но есть ошибка, когда мышь уходит после наведения

Question

Я пытался сделать новостную ленту. Но есть ошибка, когда мышь уходит после наведения

0

После мышки Оставьте тикер начинает двигаться с очень высокой скоростью. Не знаю, что это за ошибка.

Javascript:

$('#tick2').html($('#tick').html());
var temp=0,intervalId=0;
$('#tick li').each(function() {
    var offset=$(this).offset();
    var offsetLeft=offset.left;
    $(this).css({'left':offsetLeft+temp});
    temp=$(this).width()+temp+10;
});
$('#tick').css({'width':temp+40, 'margin-left':'20px'});
temp=0;
$('#tick2 li').each(function(){
    var offset=$(this).offset();
    var offsetLeft=offset.left;
    $(this).css({'left':offsetLeft+temp});
    temp=$(this).width()+temp+10;
});
$('#tick2').css({'width':temp+40,'margin-left':temp+40});

function abc(a,b) {  
    $('#outer').mouseenter(function() { window.clearInterval(intervalId);intervalId=0; });
    $('#outer').mouseleave(function() { start(); })
    var marginLefta=(parseInt($("#"+a).css('marginLeft')));
    var marginLeftb=(parseInt($("#"+b).css('marginLeft')));
    if((-marginLefta<=$("#"+a).width())&&(-marginLefta<=$("#"+a).width())){
        $("#"+a).css({'margin-left':(marginLefta-1)+'px'});
    } else {
        $("#"+a).css({'margin-left':temp});
    }
    if((-marginLeftb<=$("#"+b).width())){
        $("#"+b).css({'margin-left':(marginLeftb-1)+'px'});
    } else {
        $("#"+b).css({'margin-left':temp});
    }
} 

function start() { intervalId = window.setInterval(function() { abc('tick','tick2'); }, 10) }

start();

Вы можете проверить рабочую демонстрацию здесь: http://jsfiddle.net/mstoic/juJK2/

mstoic 23 сен. 2013, в 19:49

Источник

Теги:

javascript

jquery

ticker

1 ответ

Ещё вопросы

Mister Epic · Accepted Answer · 2013-09-23T14-40-00.000Z

Ну, ты чуть не взорвал мой браузер! Можете ли вы попробовать это вместо этого:

 function abc(a,b) {  

var marginLefta=(parseInt($("#"+a).css('marginLeft')));
var marginLeftb=(parseInt($("#"+b).css('marginLeft')));
if((-marginLefta<=$("#"+a).width())&&(-marginLefta<=$("#"+a).width())){
    $("#"+a).css({'margin-left':(marginLefta-1)+'px'});
} else {
    $("#"+a).css({'margin-left':temp});
}
if((-marginLeftb<=$("#"+b).width())){
    $("#"+b).css({'margin-left':(marginLeftb-1)+'px'});
} else {
    $("#"+b).css({'margin-left':temp});
}
} 

 function start() { intervalId = window.setInterval(function() { abc('tick','tick2'); }, 10) }

 $(function(){
      $('#outer').mouseenter(function() { window.clearInterval(intervalId); });
      $('#outer').mouseleave(function() { start(); })
      start();
 });

Рабочая скрипка: http://jsfiddle.net/juJK2/1/

Вы должны привязывать обработчики событий только один раз, а не каждый раз, когда вы вводите abc();

Это так здорово. Большое спасибо. Можете ли вы предложить некоторые дополнения или какие-либо улучшения. Или это хорошо для использования на моем сайте?