将javascript代码滚动文本转换为jquery

时间:2012-02-12 22:42:16

标签: jquery ellipsis

我正在寻找此代码的Jquery版本:

var tweet = document.getElementById('tweet');
tweet.id = 'tweet_js';
tweet.className = 'hiding';

var slide_timer,
max = tweet.scrollWidth,
slide = function () {
    tweet.scrollLeft += 1;
    if (tweet.scrollLeft < max) {
        slide_timer = setTimeout(slide, 40);
    }
};

tweet.onmouseover = tweet.onmouseout = function (e) {
e = e || window.event;
e = e.type === 'mouseover';
clearTimeout(slide_timer);
tweet.className = e ? '' : 'hiding';
if (e) {
    slide();
} else {
    tweet.scrollLeft = 0;
}
};

此代码发布在此处: http://jsfiddle.net/sdleihssirhc/AYYQe/3/ 作为这个问题的答案: CSS/JQuery powered sideways scrolling text on hover

2 个答案:

答案 0 :(得分:2)

我建议你写它;)或者你有任何问题吗?如果您的代码已经运行,为什么要使用jquery呢?你没有任何性能优势或类似的东西。

答案 1 :(得分:0)

如果工作正常,我会使用代码。因为此代码中没有性能增益或行。

如果你想看到它的jQuery版本,请点击此处。

var $tweet = $('#tweet');
$tweet.attr({
    id: 'tweet_js',
    class: 'hiding'
});

var slide_timer,
max = $tweet.outerWidth(),
var slide = function () {
    $tweet.scrollLeft($tweet.scrollLeft() + 1);
    if ($tweet.scrollLeft() < max) {
        slide_timer = setTimeout(slide, 40);
    }
};

$tweet.bind('mouseover mouseout', function (e) {
    var isMouseOver = e.type === 'mouseover';
    clearTimeout(slide_timer);
    tweet.toggleClass('hiding', !isMouseOver);
    if (isMouseOver) {
        slide();
    } else {
        $tweet.scrollLeft(0);
    }
});