1 
<div id="mqtext">text text text</div>

CSS

#mqtext{
   position:absolute;
   bottom:3px;
   overflow:hidden;
   white-space:nowrap;
   cursor:pointer;
}

js

$('#mqtext').bind('marquee', function() {
  var ob = $(this);
  var tw = ob.width();
  var ww = ob.parent().width();
  ob.css({ right: -tw });
  ob.animate({ right: ww }, 70000, 'linear', function() {
  ob.trigger('marquee');
  });
  }).trigger('marquee');

これは単純なマーキー テキストで、機能しますが、マウスオーバーで停止しようとしています。

$('#mqtext').hover(function() {
    $(this).stop();
});

これも機能し、テキストは停止しますが、カーソルが離れていると再び再生されません。

なにか提案を ？

4

2 に答える 2

1

実際、必要なのはこれだけです。

ライブデモ

var ob = $('#mqtext'),
    w = ob.width();
ob.css({right:-w});

function marqee(){
    if(ob.position().left+w<0) ob.css({right:-w});
    ob.animate({right:'+=4'}, 60, 'linear', marqee);
}
marqee(); // Start

ob.hover(function( e ) {
    return e.type=='mouseenter' ? $(this).stop() : marqee();
});
于 2013-10-30T21:31:47.583 に答える
0

マウスが離れたときにテキストが再び動き始めることができないという問題がある場合は、以下のコードで修正できます。

NEWEST UPDATEDワーキングJSFiddle

先に進み、コードを作り直して、遅い問題を修正し、読みやすくしました。

var ob = $("#mqtext"),
    tw = ob.width(),
    ww = ob.parent().width() + tw;

function slideAnimate() {
    ob.animate({       
        right: '+=' + ww
    }, 7000, 'linear');
    ob.animate({
        right: '-=' + ww
    }, 1, slideAnimate);
}

ob.css({ right: -tw });
$(slideAnimate);

ob.mouseenter(function() {
    ob.stop(true, false);
}).mouseleave(function() {
    slideAnimate();
});
于 2013-10-30T21:00:32.150 に答える