Html Marquee 滚动不流畅，需要 100% 平滑滚动才能使用 Marquee
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18417056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Marquee doesnot scroll smoothly, need 100% smooth scroll for marquee
提问by user2644743
I am using marquee scroll from right side to the left. The below code works fine. But its not scrolling smoothly. The content "Hover on me to stop" is blinking or flashing. I need a 100% smooth scroll for the below marquee. Please help me. Whether it is possible without javascript??
我正在使用从右侧到左侧的选取框滚动。下面的代码工作正常。但它不能顺利滚动。内容“悬停在我身上”闪烁或闪烁。我需要为下面的选取框进行 100% 平滑滚动。请帮我。没有javascript是否可能？
<marquee behavior='scroll' direction='left' scrollamount='3' onmouseover='this.stop()' onmouseout='this.start()'>Hover on me to stop</marquee>
回答by Deepak Yadav
If you wish to try it using pure CSS then this is the easiest approach. Though you need to check the support for older browsers and do add vendor prefixes.
如果您想使用纯 CSS 来尝试它，那么这是最简单的方法。尽管您需要检查对旧浏览器的支持并添加供应商前缀。
.marquee-parent {
position: relative;
width: 100%;
overflow: hidden;
height: 30px;
}
.marquee-child {
display: block;
width: 147px;
/* width of your text div */
height: 30px;
/* height of your text div */
position: absolute;
animation: marquee 5s linear infinite; /* change 5s value to your desired speed */
}
.marquee-child:hover {
animation-play-state: paused;
cursor: pointer;
}
@keyframes marquee {
0% {
left: 100%;
}
100% {
left: -147px /* same as your text width */
}
}<div class="marquee-parent">
<div class="marquee-child">
Hover on me to stop
</div>
</div>回答by Z. Khullah
A little late to the party..
聚会有点晚了..
There's an angular directive for this: https://github.com/davidtran/angular-marquee. You don't touch any js - just add the directive tag and you're done
对此有一个角度指令：https: //github.com/davidtran/angular-marquee。你不接触任何 js - 只需添加指令标签，你就完成了
<div angular-marquee></div>
And it doesn't fall back on the "deprecated tag" argument, relying on modern solution
并且它不会依赖于“已弃用的标签”论点，而依赖于现代解决方案
