2015-05-24 4 views
0

Мне интересно, позволяет ли HTML-метка статический текст в начале элемента управления (или контейнера), поэтому, когда текст скользит влево, он будет пропускать текст?HTML Marquee - Static text

Например.

Я смотрю, как дата статична по левому краю, а текст из базы данных будет проходить через нее, а затем снова появится справа.

HTML:

<marquee onmouseover="this.stop();" onmouseout="this.start();" 
    class="html-scroller" direction="left" behavior="scroll" scrollamount="12"> 
    <p style="color:#626060; font-weight:bold">24/05/2015 - Some Infor here</p> 

CSS:

.html-scroller 
{ 
    height:30px; 
    border:solid; 
} 

Конечно, приведенный выше код будет сделать текст, включая дату слайд пропуск край на контроллере.

Глядя на примеры marquee, нет ничего, поэтому, если мне нужно его изменить, было бы проще создать собственное?

ответ

1

Я не думаю, что есть частичное статическое текстовое решение для шатров. Я хотел бы сделать это:

HTML

<div class="container"> 
    <div class="date">24/05/2015</div> 
    <div> 
    <marquee 
     onmouseover="this.stop();" 
     onmouseout="this.start();" 
     direction="left" 
     behavior="scroll" 
     scrollamount="12"> 
     <p> 
     Some Infor here 
     </p> 
    </marquee> 
    </div> 
</div> 

CSS

.container 
{ 
    position: relative; 
    border: 2px solid #626060; 
    box-sizing: border-box; 
} 

.container, 
.container .date { 
    padding: 10px; 
    background-color: #fff; 
    color: #626060; 
    font-weight: bold; 
} 

.container .date { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 10; 
} 

.container marquee { 
    line-height: 0.8; 
} 

.container marquee p { 
    margin: 0; 
} 

http://jsfiddle.net/1wzxywtn/

+0

Brilliant спасибо – user3428422