• 解决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 

  • 相关阅读:
    Echars折线配置详解
    Echarts中太阳图(Sunburst)的实例
    MongoDB shell 介绍
    js深度克隆对象
    js将有父子关系的数据转换成树形结构数据
    使用Mongoose类库实现简单的增删改查
    MongoDB可视化工具--Robo 3T 使用教程
    go语言之进阶篇并行和并发的区别与go语言并发优势
    go语言之进阶篇拷贝文件案例
    go语言之进阶篇借助bufio实现按行读取内容
  • 原文地址:https://www.cnblogs.com/Godblessyou/p/2388777.html
Copyright © 2020-2023  润新知