zoukankan      html  css  js  c++  java
  • 原生态JS  图片滚动

          这里写的是原生态的JS图片滚动。

               说明:scroll_begin 和scroll_end 必须为一个table里的两个相邻的<td>

               注意:scroll_begin里面的div宽度最好能等于Scroll_div 的宽度

     <div id="scroll_div" style="overflow: hidden;  997px; margin: auto;">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td id="scroll_begin" valign="top">
                        <asp:Repeater ID="rptTrainPlan" runat="server">
                            <ItemTemplate>
                                <div style=" 997px; color: #ff6600">
                                    <a href='TPDetail.aspx?id=<%# Eval("TPId") %>' style="color: #ff6600">
                                        <%# Eval("Title") %>  [<%# Eval("TrainDate")%>] </a>
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                    </td>
                    <td id="scroll_end">
                    </td>
                </tr>
            </table>
        </div>
        <script language="javascript" type="text/javascript">        //滚动速度        var speed = 20;
            scroll_end.innerHTML = scroll_begin.innerHTML;
            function Marquee() {
                if (scroll_begin.offsetWidth < scroll_div.offsetWidth) {
                    scroll_end.innerHTML = '';
                }
                if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
                    scroll_div.scrollLeft -= scroll_begin.offsetWidth
                else {
                    scroll_div.scrollLeft++;
                }
            }
            var MyMar = setInterval(Marquee, speed);
           //事件注册        scroll_div.onmouseover = function () {
                clearInterval(MyMar);
            }
          //事件注册        scroll_div.onmouseout = function () {
                MyMar = setInterval(Marquee, speed);
            }
        </script>

      

  • 相关阅读:
    Visual SVN1.5以上版本下载及破解过程
    C#线程系列讲座(2):Thread类的应用
    a标签的href 和onclick
    Windows 服务快捷启动命令
    iframe 跨域自动适应高度
    修正认知:string、Empty和null三者的正确区别

    线索二叉树
    最大连续子序列
    寻找最近点对
  • 原文地址:https://www.cnblogs.com/jiangqiang/p/2777561.html
Copyright © 2011-2022 走看看