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在悬停滚动文本

回答

相关问题