zoukankan      html  css  js  c++  java
  • Javascrit文字水平滚动实现

    看到别人做的水平滚动似乎和简单.确实很简单,那是因为别人会了.自己不会,那就先理解别人的代码吧.

    <div id="rbb" style=" float: left;

    background: #FFF;

    overflow:hidden;

    border: none;

    height: 21px;

    width: 321px;

    ">

    <div id="indemo" style="float: left; width: 1500%;">

    <div id="demoa" style="float: left;">

    <asp:Repeater ID="repeaterHotMusic" runat="server">

    <ItemTemplate>

    <span class="olid">

    <%#Eval("olid") %></span> <a href="#">

    <%#Eval("title")%></a>

    <%#Eval("singer")%>&nbsp;

    </ItemTemplate>

    </asp:Repeater>

    </div>

    <div id="demob" style="float: left;">

    </div>

    </div>

    </div>

    <script type="text/javascript" language="javascript">

    var speed = 30;

    var tab = document.getElementById("rbb");

    var tab1 = document.getElementById("demoa");

    var tab2 = document.getElementById("demob");

    tab2.innerHTML = tab1.innerHTML;

    function Marquee() {

    if (tab2.offsetWidth - tab.scrollLeft <= 0)

    tab.scrollLeft -= tab1.offsetWidth

    else {

    tab.scrollLeft++;

    }

    }

    var MyMar = setInterval(Marquee, speed);

    tab.onmouseover = function () { clearInterval(MyMar) };

    tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };

    </script>

    特别注意的是: indemo的宽度以及几个div的顺利及样式.

  • 相关阅读:
    10月27号
    10月23号
    10月26号
    10月30号
    10月28号
    10月29号
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
  • 原文地址:https://www.cnblogs.com/Dtscal/p/2175297.html
Copyright © 2011-2022 走看看