此特定div中的文本应该是字幕

时间:2014-02-06 05:46:33

标签: css

#player #title{
left: 90px;
width: 200px;
overflow: hidden;
}

此特定div(#Title)中的文本应该是一个选框。但是HTML中不应该有任何变化(只允许使用java脚本)。怎么办?

2 个答案:

答案 0 :(得分:0)

http://jsfiddle.net/4mTMw/8/

<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值来匹配文本大小,您可能还需要重置字母间距。如果文本改变或使用某些字体,它可能会中断。