zoukankan      html  css  js  c++  java
  • 解决DataList控件无缝滚动图片(转)

    解决问题:1.无缝滚动;2.页面初始时图片显示页面上,而不是才从一个方向出来。 
    将绑定数据绑定到DataList 控件后。其他数据控件也可使用此方法。 
    页面源代码:

    <div id="demo" style="OVERFLOW: hidden; WIDTH: 922px; HEIGHT: 137px"> 
    <table cellpadding="0" cellspacing="0" width="804px"> 
    <tr> 
    <td id="demo1"> 
    <asp:DataList ID="dlInfo" runat="server" Height="1px" RepeatColumns="5" RepeatDirection="Horizontal" Width="41px"> 
        <ItemTemplate> 
            <table style=" 155px; height: 125px" cellpadding="0" cellspacing="0"> 
                <tr> 
                    <td style="height: 100px"> 
                        //显示图片 
                        <asp:Image ID="Image1" runat="server" Height="114px" Width="180px" ImageUrl='<%# Eval("GImage") %>' /></td> 
                </tr> 
                <tr> 
                    <td align="center" style="text-align: center; height: 25px;"> 
                       //显示图片名称 
                        <asp:HyperLink ID="HyperLink2" runat="server" Text='<%# Eval("GName") %>' Font-Size="9pt" ForeColor="#249DE3"></asp:HyperLink></td> 
                </tr> 
            </table> 
        </ItemTemplate> 
    </asp:DataList> 
    </td> 
    //这里很重要,需要一列来滚动图片 
    <td id="demo2"></td> 
    </tr> 
    </table> 
    </div> 
    //滚动代码 
    <script type="text/javascript" language="javascript"> 
    //滚动速度 
    var speed=20 
    demo2.innerHTML=demo1.innerHTML 
    //从右至左 
    function Marquee(){ 
    if(demo1.offsetWidth-demo.scrollLeft<=0) 
        demo.scrollLeft=0 
    else 
        demo.scrollLeft++ 

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

    转自:http://www.cnblogs.com/shanymen/archive/2009/06/03/1495303.html 

  • 相关阅读:
    4KB对齐
    小甲鱼PE详解之区块表(节表)和区块(节)(PE详解04)
    策略设计模式与c语言中的函数指针
    包装类类值传第
    java的 clone方法
    ubuntu中maven建的web项目不能将project facet设置为 dynamic web module 3.0
    maven 笔记
    eclipse中xml文件不能自动提示的解决办法
    oracle merge into 的例子
    oracle 常用sql
  • 原文地址:https://www.cnblogs.com/Godblessyou/p/2388777.html
Copyright © 2011-2022 走看看