我正在寻找此代码的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
答案 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);
}
});