[英]marquee not scrolling completely
嗨,大家好,我試圖把股票行情自動收錄到我的手中,但是當我使用marquee
使其工作時,我也使用了simple scroll
並放入了php usercake usermanagement系統,但它不起作用是我的代碼有任何問題...
提前致謝..
我使用的代碼
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.infowrapper {
width: 100%;
overflow: hidden;
}
#stockinfo {
width: 800%;
font-size: 10px;
}
.stockWrapper {
display: block;
padding-top: 5px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 100;
float: left;
margin-left: 20px;
font-size: 12px;
}
.stockSymbol {
font-weight: 100;
}
.stockPrice {
font-weight: 100;
color: red;
}
.stockChange {
font-weight: 100;
color: green;
}
.stockTime {
font-weight: 600;
color: grey;
font-size: smaller;
display: hidden;
}
h2 {
font-size: 10px;
}
p {
margin-bottom: 10px;
}
.symbol {
float: left;
margin-right: 3px;
}
.symbol .name {
display: block
}
.symbol.up {
background: #70DB70
}
.symbol.up .change {
color: green
}
.symbol.down {
background: #f7cdc2
}
.symbol.down .change {
color: red
}
</style>
<script type='text/javascript'>
//<![CDATA[
</script>
<script type="text/javascript">
(function($) {
$(function() {
$("#scroller").simplyScroll();
});
})(jQuery);
</script>
<script type="text/javascript" src="js/company.js"></script>
<script type="text/javascript" src="js/jquery.simplyscroll.js"></script>
<link rel="stylesheet" href="js/jquery.simplyscroll.css" media="all" type="text/css">
<ul id="scroller" style="background-color:#CCC; height:30px;">
<li style="height:30px;">
<div id="stockinfo">
</div>
</li>
</ul>
一個簡單的答案是,如果您希望擁有有效的文檔,這些文檔能夠始終如一地呈現並且不會惹惱讀者,請不要使用它 。
http://www.sitepoint.com/web-foundations/marquee-html-element/
過去,人們一直在努力使它成為CSS 3標准的一部分,但即使已被刪除。
本注釋替代了與“字幕”效果有關的CSS功能規范草案。 該規范不再被開發。
http://www.w3.org/TR/css3-marquee/
該規范已終止。 CSS工作組找不到足夠的實現,因此目前尚無進一步的計划。
不確定您是否仍需要答案,但這可能會對其他人有所幫助。
無論我們怎么說帳篷,仍然有很多人在使用它們,因此值得給出一個有用的答案。
標簽應該被遺忘; 它是全球性的,因為它是專有的,並且從未成為標准(如Connexo所寫),因此不受全球支持,但是您可以使用CSS使文本朝着您想要的任何方向移動。
這是我在CSS文件中使用的
/************************************************************************/
/* Marquee with text moving from right to left */
/************************************************************************/
/* Make it a MarqueeTxt */
.MarqueeTxt {
width: 900px; /* What I call the see-through window below */
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
font-size:2.5em;
color:#CD3245;
text-shadow: #000 1px 1px 0;
box-sizing: border-box;
/* This is to make the text move across the see-through window */
/* in 20 seconds (=> scrolling speed) */
animation: MarqueeTxt 20s linear infinite;
-webkit-animation: MarqueeTxt 20s linear infinite;
/* This is for Safari that tends to render jerky marquees */
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* This is to stop scrolling when hovering over the text */
.MarqueeTxt:hover {
animation-play-state: paused;
-webkit-animation-play-state: paused
}
/* Make it move */
/* If omitted, IE will not scroll the text */
@keyframes MarqueeTxt {
0% { text-indent: 26em }
100% { text-indent: -55em }
}
/* Make it move */
/* If omitted, Chrome (possibly FF) will not scroll the text */
@-webkit-keyframes MarqueeTxt {
0% { text-indent: 26em }
100% { text-indent: -55em }
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
在PHP或HTML中,通常在<p>
標記中使用它,例如<p class="MarqueeTxt">The text you want to display</p>
。
您將必須使用以下width: 900px;
, text-indent: 26em
和text-indent: -55em
如果要確保文本滾動從右向左正確流動,並在完全滾動后僅幾秒鍾后重新出現。
我已經在IE,Safari,Chrome和FF上對此進行了測試。
我希望這個能幫上忙
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.