Javascript jQuery在悬停状态下滚动文本

我有一个“a”元素，我想在悬停时向左滚动。为此，我删除第一个字符并将其附加到字符串的末尾

如何持续启动滚动功能

鼠标进入元素->启动滚动（），直到鼠标离开元素或用户单击它

html:

---

这是完整的代码，你可以

​

使用

setInterval（）

从mouseenter重复调用它，然后使用

clearInterval（）

在mouseleave上停止它：

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);
}

演示：

如果使用

.text（）

方法的回调语法（甚至将该行直接移动到

中。悬停

代码），则可以使

scroll（）

函数更加整洁：

演示：

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;
    }​

    $(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
        });
    };

});​

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>​

---

我会在课文末尾加一个空格，否则第一个和最后一个单词会粘在一起。顺便问一下：今天所有的字幕和滚动文本问题是怎么回事？我错过了什么吗？@Engineer-这里的多个元素都是如此：-假设该类的元素没有嵌套，那么一次应该只有一个间隔，并且鉴于OP特别询问了锚元素，它们不应该嵌套。但是可以使用

.data（）

更新它以在元素本身上存储间隔id。是的，通过

.data（）

实现，它可以用于多个元素。@Engineer:

.data（）

可以更好地满足未来（还不知道）的需求，但是我的代码在没有它的情况下也可以按照我前面的注释中的提示工作。关于我对元素不会嵌套的假设，请注意OP提供的

scroll（）

函数使用了

.text（）

，因此基本上证实了这一假设。您正确地注意到了

.text（）

。但对于不争论函数的作用域，使用

.data（）

可能更可取。另一方面，我们不知道OP的javascript技能水平。因此，通过避免复杂的代码，您的答案可能是适用的+无论如何，回答得很好，谢谢。虽然我的方法似乎不太好。操纵字符串以模拟滚动效果会导致“不太平滑”效果。

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

  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;
    }​

  <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>​

    $(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
        });
    };

});​