HTML 字幕 - 静态文本

标签 html css marquee

我想知道 HTML 选框是否允许在控件(或容器)的开头使用静态文本,以便当文本向左滑动时它会滑动传递文本?

例如。

我正在查看要静态对齐到左侧的日期,数据库中的文本将滑过它,然后从右侧重新出现。

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;
}

当然,上面的代码将使包含日期幻灯片的文本通过 Controller 的边缘。

看字幕示例没有任何东西,所以如果我必须更改它,创建我自己的会更容易吗?

最佳答案

我认为选取框没有部分静态文本解决方案。 我会这样做:

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/

关于HTML 字幕 - 静态文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30427656/

相关文章:

Android 按钮选框

安卓选框不工作

jquery - 向上滑动 <p>

php - 将 mysql 结果行拆分为列,php

html - 无法垂直对齐高度为 auto 的 div 内的 2 个 div 的内容

c# 使用 AngleSharp 解析 HTML,找到带有部分 ID 的 DIV

android - 我的 CSS 会在 Android 的 WebView 和 IOS UIWebView 中正确呈现吗?

css - CSS 中的 CLEARANCE 到底是什么

html - 具有未知宽度的 CSS float 不会用文档类型包装空格

javascript - 如何将选择选项设置为等于 innerHTML