2013-08-24 206 views
2

我使用从右侧到左侧的滚动滚动。下面的代码工作正常。但它的滚动并不顺畅。 “悬停在我身上停止”的内容闪烁或闪烁。我需要为下面的选取框100%平滑滚动。请帮帮我。是否有可能没有JavaScript?选框不平滑滚动,需要100%平滑滚动选框

<marquee behavior='scroll' direction='left' scrollamount='3' onmouseover='this.stop()' onmouseout='this.start()'>Hover on me to stop</marquee> 
+0

好,然后给我用JS的解决方案。 – user2644743

+2

选取框标记已被弃用。请不要使用。看到这个解决方案:http://stackoverflow.com/a/2227838/1121982 – hallaji

+2

你会付多少钱?如果你不付钱,我明白你想自己做。只是[谷歌](http://www.google.com)“javascript选取框替代” – Itay

回答

-1

有点迟到了..

有角指令此:https://github.com/davidtran/angular-marquee。你不要碰任何JS - 只需添加该指令的标签,你就大功告成

<div angular-marquee></div> 

而且它不落人后的“过时标签”的说法,依托现代化的解决方案

2

如果您希望尝试使用纯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>

+0

你可以没有差距吗? –