我需要在 Javascript 中选择多个类,并使其在悬停时产生滑动效果。
这些元素应该在 <span>
中标签。
第一个元素正在工作:
<p id="tweet1">First long text displayed fully on hover</p>
第二个元素、第三个元素等不工作:
<span class="tweet1">Second long text displayed fully on hover</span>
<span class="tweet1">Third long text displayed fully on hover</span>
JavaScript:
var tweet = document.getElementById('tweet1');
tweet.id = 'tweet1';
tweet.className = 'hiding';
var slide_timer,
max = tweet.scrollWidth,
slide = function () {
tweet.scrollLeft += 2;
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;
}
};
CSS:
#tweet1 {
overflow:hidden;
white-space:nowrap;
width:120px;
}
.hiding {
text-overflow:ellipsis;
}
JSFiddle 上的完整代码:http://jsfiddle.net/27uuj/3/
最佳答案
那是因为 document.getElementById('tweet1');
通过元素的“id”而不是类获取元素。 (这样命名是有原因的。)您可能需要 getElementsByClassName()
代替。
关于javascript - 如何在 Javascript 中选择多个类而不是 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20556629/