zoukankan      html  css  js  c++  java
  • 图片不停的横滚

    <html>
    <body>
    <table>
       <tr>
    <td>      //下面的div必不可少,非常重要。。。                                                                                                                                                                                 
               <div id=BEIJING style=overflow:hidden;height:120px;700px>
                   <table>
                       <tr>
                           <td id=HAIDIAN>
                               <table>
                                   <tr>
                                       <td><img src="1.jpg"</td>
                                       <td><img src="2.jpg"></td>
                                       <td><img src="3.jpg"></td>
                                       <td><img src="4.jpg"</td>
                                       <td><img src="5.jpg"</td>
                                   </tr>
                               </table>
                           </td>
                          
                            <td id=CHAOYANG>
                            </td>

                        </tr>
                    </table>
                </div>
    <script>
        var speed=10        //速度数值越大速度越慢
        CHAOYANG.innerHTML=HAIDIAN.innerHTML
        function Marquee()
        {
            if(CHAOYANG.offsetWidth-BEIJING.scrollLeft<=0)
            {
                BEIJING.scrollLeft-=HAIDIAN.offsetWidth
            }
            else
            {
                BEIJING.scrollLeft++
            }
        }

        var MyMar=setInterval(Marquee,speed)
        BEIJING.onmouseover=function()
        {
            clearInterval(MyMar)
        }
        BEIJING.onmouseout=function()
        {
            MyMar=setInterval(Marquee,speed)
        }
    </script>

            </td>
        </tr>                                                                                                                                                                                                                           
    </table>

    </body>
    </html>
    ==============================
    上面是普通的,下面的是DataList中滚动
    ==============================
    <table>      //标准DataList图片横滚
        <tr>
            <td>
                <div id="demo" style="OVERFLOW: hidden; WIDTH: 1000px; HEIGHT: 125px">
                <table>
                <tr>
                    <td id="demo1">
                        <asp:datalist id="DataList1" runat="server" Width="712px" RepeatDirection="Horizontal">
                        <ItemTemplate>

                        <table>
                        <tr>
                            <td>
                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("title") %>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                        <td>
                            <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Photo") %>' />
                        </td>
                        </tr>
                        </table>
                        </ItemTemplate>

                        </asp:datalist>
                    </td>
                    <td id="demo2">
                    </td>

                </tr>
                </table>
                </div>
            </td>
        </tr>
    </table>

    <script language="javascript" type="text/javascript">
    var Picspeed=30
    demo2.innerHTML=demo1.innerHTML
    function Marquee1(){
    if(demo2.offsetWidth-demo.scrollLeft <=0)
    demo.scrollLeft-=demo1.offsetWidth
    else{
    demo.scrollLeft++
    }
    }
    var MyMar1=setInterval(Marquee1,Picspeed)
    demo.onmouseover=function() {clearInterval(MyMar1)}
    demo.onmouseout=function() {MyMar1=setInterval(Marquee1,Picspeed)}
    </script>
  • 相关阅读:
    在SplendidCRM中添加用户控件
    SPendidCRM:给HK的ImageInfoEntryEditView增加一个checkbox,用于判断特殊类型的PODS记录
    html button 跳转ASP.NET页面跳转技术总结
    让<li>不显示超出内容,显示... (编程方法和CSS方法)
    SplendidCRM Popup.aspx的hyperlink字段配置的易错点
    asp.net 个别页面URL参数出现中文乱码的解决方法
    解决:工具箱里边没了Dev控件
    DevControlgridview的属性说明 (转)
    DevControlgridview的属性说明 (转)
    VM如何设置U盘启动
  • 原文地址:https://www.cnblogs.com/zjw/p/1233586.html
Copyright © 2011-2022 走看看