#player #title{
left: 90px;
width: 200px;
overflow: hidden;
}
此特定div(#Title)中的文本应该是一个选框。但是HTML中不应该有任何变化(只允许使用java脚本)。怎么办?
答案 0 :(得分:0)
<div class='marquee'>
<div class='marquee-text'>
Testing this marquee function
</div>
</div>
<script>
var marquee = $('div.marquee');
marquee.each(function() {
var mar = $(this),indent = mar.width();
mar.marquee = function() {
indent--;
mar.css('text-indent',indent);
if (indent < -1 * mar.children('div.marquee-text').width()) {
indent = mar.width();
}
};
mar.data('interval',setInterval(mar.marquee,1000/60));
});
</script>
答案 1 :(得分:0)
如果你的文字是已知的并且永远不会改变,你可以使用一些CSS3:过渡和文本阴影,并使用文本缩进来滑动,例如:
p {
text-shadow:35em 0 0;/* equal to length of text */
width:15em;
white-space:nowrap;
overflow:hidden;
animation: marqueeme 3s infinite;
margin:auto;
background:yellow;
border:solid red;
}
@keyframes marqueeme {
to {text-indent:-35em;
}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
查看并测试它:http://codepen.io/gc-nomade/pen/wGtmy
您需要使用EM值来匹配文本大小,您可能还需要重置字母间距。如果文本改变或使用某些字体,它可能会中断。