1

ホバー時に左にスクロールしたい「a」要素があります。これを行うには、最初の文字を削除して、文字列の最後に追加します。

スクロール機能を継続的に起動するにはどうすればよいですか？

マウスが要素に入る->scroll（）は、マウスが要素を離れるか、ユーザーが要素をクリックするまで起動されます。

html：

<a href="foo.htm" class="scrollthis">this text scrolls on hover</a>

jQuery：

$(".scrollthis").hover(function(){
    scroll($(this));

});

function scroll(ele){

    var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);
    $(ele).text(s);
}
4

3 に答える 3

2

mouseentersetInterval()から繰り返し呼び出してから、mouseleaveでclearInterval()停止するために使用します。

var intervalID;
$(".scrollthis").hover(function(){
    var $this = $(this);
    intervalID = setInterval(function() {
       scroll($this);
    }, 100);
}, function() {
    clearInterval(intervalID);
});

はすでにjQueryオブジェクトであるため$(ele)、scroll()関数で使用する必要はないことに注意してください。ele

function scroll(ele){
    var s = ele.text().substr(1)+ele.text().substr(0,1);
    ele.text(s);
}

デモ： http： //jsfiddle.net/hTBZn/

メソッドのコールバック構文を使用する場合（またはその1行をコードに直接移動scroll()する場合）、関数を少しすっきりさせることができます。.text().hover

function scroll(ele){
    ele.text(function(i,val) { return val.substr(1) + val.substr(0,1); });
}​

デモ： http： //jsfiddle.net/hTBZn/1/

于 2012-07-07T11:45:20.400 に答える
0

これが完全なコードです、あなたはjsfiddleとしてそれを試すことができます

function scroll(ele){
    var s = $(ele).text().substr(1)+$(ele).text().substr(0,1);
    $(ele).text(s);
}

scrollInterval = null;
function startScrolling(e) {
    if (!scrollInterval) {
        scrollInterval = setInterval(function(){
            scroll(e)
        },100);
    }
}

function stopScrolling(e) {
    clearInterval(scrollInterval);
    scrollInterval = null;
}

$(".scrollthis").hover(function(){
    startScrolling($(this));
});

$(".scrollthis").mouseout(function(){
    stopScrolling($(this));
});

$(".scrollthis").mousedown(function(){
    stopScrolling($(this));
});

</ p>

于 2012-07-07T11:38:39.267 に答える
0

css

  div.container{
      width: 130px;
    }
    div.title-holder {
      width: 130px;
      height:20px;
      text-align:center;
      background: silver;
      overflow:hidden;
        position: relative;
    }
    div.title-holder a {  
      position: relative;  
      white-space:nowrap;  
        left: 0px;
    }
    div.image{
        background: brown;
        width: 100%;
        height: 100px;
    }​

html

  <div class="container">
    <div class="title-holder">
        <a href="somelink.html">long text that needs to scroll, long text that needs to scroll, long text that needs to scroll</a>
    </div>
</div>​

js

    $(function(){
var scroll_text;
$('div.container').hover(
    function () {
        var $elmt = $(this);
        scroll_text = setInterval(function(){scrollText($elmt);}, 5);
    },
    function () {
        clearInterval(scroll_text);
        $(this).find('div.title-holder a').css({
            left: 0
        });
    }
);

    var scrollText = function($elmt){
        var left = $elmt.find('div.title-holder a').position().left - 1;
        left = -left > $elmt.find('div.title-holder a').width() ? $elmt.find('div.title-holder').width() : left;
        $elmt.find('div.title-holder a').css({
            left: left
        });
    };

});​
于 2012-07-07T11:46:01.177 に答える