jQuery在懸停滾動文本

我有一個「a」元素，我想在懸停時向左滾動。爲此，我刪除第一個字符並將其追加到字符串的末尾。jQuery在懸停滾動文本

我該如何持續激活滾動功能？

鼠標進入元素 - > 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); 
}

來源

2012-07-07 Joey

我想補充一個空間到文本的末尾，否則第一個和最後一個字得到粘在一起。 – 2012-07-07 11:50:23

btw：今天所有的大寫字母和滾動文字問題都有哪些？我錯過了什麼？ – 2012-07-07 11:52:26

使用setInterval()到CA從反覆的mouseenter LL，然後clearInterval()阻止它在鼠標離開：

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

注意，你不需要在你scroll()功能使用$(ele)因爲ele已經是一個jQuery對象：

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

演示：http://jsfiddle.net/hTBZn/

如果您使用的回調語法，則可以使scroll()函數有點整齊3210方法（或甚至移動一個線直接進入.hover代碼）：

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

演示：http://jsfiddle.net/hTBZn/1/

來源

2012-07-07 11:45:20 nnnnnn

@Engineer - 它在多個元素的情況下工作在這裏：http://jsfiddle.net/hTBZn/2/ - 假設該類的元素不是嵌套的一次只能有一個時間間隔，並且考慮到OP特別詢問了一個錨元素，他們不應該被嵌套。但是可以使用'.data（）'將其更新爲在元素本身存儲間隔id。 – nnnnnn 2012-07-07 11:56:07

是的，使用'.data（）'實現，它可以用於多個元素。 – Engineer 2012-07-07 12:02:25

@Engineer：'.data（）'可以更好地適應未來（至今未知）的需求，但是我的代碼在我以前的評論中沒有提及它。關於我認爲元素不會嵌套的假設，請注意OP提供的'scroll（）'函數使用'。text（）'，所以幾乎證實了這個假設。 – nnnnnn 2012-07-07 12:06:31

下面是完整的代碼，你可以try it out as a 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)); 
});

來源

2012-07-07 11:38:39

對不起，我輸入的速度比我想象的要快...... – 2012-07-07 11:46:32

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-07 11:46:01

jQuery在懸停滾動文本

回答

相關問題