Question

我有一个200px的容器，以margin为中心：0 auto。在容器中是一个选框宽度，滚动的长文本。

我的目标是将选框内显示的文本字体大小设置为3em（缩放），然后将溢出的文本设置为1em。

基本上，我希望在选框内有一个缩放文本。欢迎使用jQuery。

<div class="main">
   <div class="container" style="width: 200px; margin: 0 auto">
     <marquee style="display: inline">Let's assume this goes outsize the div INSIDE DIV CONTAINER and then outside container</marquee>
  </div>
</div>

Answer 1

你想让文字滚动和两层效果吗？

正如已经评论的那样：不要使用选框或滚动文字，现在真的没有人想看到正在运行的文本行

如果你真的想这样做就是一个例子。这个想法是背景中的文本大小是前面文本的两倍，运行速度提高了2倍

.outer {
  width:200px;
  height:100px;
  margin:0 auto;
  overflow:hidden;
  position:relative;
  background-color:#eee;
}
.marque1 {
  font-size:40px;
  width:400px;
  position:absolute;
  left:-100px;
  top:0;
  line-height:90px;
  color:#999;
}
.marque2 {
  font-size:20px;
  width:200px;
  position:absolute;
  left:0;
  top:0;
  line-height:100px;
  color:#f00;
}

<div class="outer">
<marquee class="marque1" scrollamount="10">THIS IS SOME TEXT THAT SCROLL OVERLAYED</marquee>
<marquee class="marque2" scrollamount="5">THIS IS SOME TEXT THAT SCROLL OVERLAYED</marquee>
</div>

设置容器的三种不同字体大小

1 个答案: