none
【ASP.NET】div无缝滚动在信息少的情况下,不滚动 RRS feed

  • 问题

  • 有一个问题一直困扰的着我,就是利用网上流行的div无缝滚动图片信息,每当图片(信息)少的情况下,滚动功能无效。

    代码如下:
    <div id="demo" style="overflow: hidden; width: 1004px; margin:0px auto; " align="center">
                    <table cellspacing="0" cellpadding="0" width="100%" border="0">
                        <tr>
                            <td id="demo1" style="height: 126px">
                                <asp:DataList ID="runproduct" runat="server" RepeatDirection="Horizontal">
                                    <ItemTemplate>
                                        <table cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td>
                                                    <a href="showpage.aspx?pid=<%#DataBinder.Eval(Container.DataItem,"id")%>" target="_blank">
                                                        <div style="border-right: #666666 2px solid; border-top: #666666 2px solid; border-left: #666666 2px solid;
                                                            border-bottom: #666666 2px solid;">
                                                            <img id="Img1" width="95" height="102" src='<%#DataBinder.Eval(Container.DataItem,"img")%>'
                                                                border="0" />
                                                        </div>
                                                    </a>
                                                </td>
                                                <td>
                                                    <asp:Literal ID="blank" runat="server"></asp:Literal>
                                                </td>
                                            </tr>
                                         
                                        </table>
                                    </ItemTemplate>
                                </asp:DataList>
                            </td>
                            <td id="demo2" style="height: 126px; width: 1px;">
                            </td>
                            <td id="demo3" width="1" style="height: 126px">
                            </td>
                        </tr>
                    </table>
                </div>


    <script type="text/javascript" language="javascript">
    var speed=30;
    demo2.innerHTML=demo1.innerHTML;
    demo3.innerHTML=demo1.innerHTML;
    function Marquee(){
    if(demo2.offsetWidth-demo.scrollLeft<=0)
         demo.scrollLeft-=demo1.offsetWidth;
    else{
         demo.scrollLeft++;
        }
    }
    var MyMar=setInterval(Marquee,speed);
    demo.onmouseover=function() {clearInterval(MyMar);}
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
    </script>
    以上div中我用来承载图片(信息)的容器为datalist控件。如果信息量少的情况下,比如只有一个图片需要滚动,这个时候找个功能就失效了。而我发现,滚动失效的原因是由于滚动信息的总长度小于目前div的长度。所以我想问问大家,这样的问题谁碰到过,应该如何解决?感谢感谢
    2010年8月13日 16:30

答案

  • 你好!

    一般情况下,没有超出范围就不需要滚动。如果你的确要这样做使用一个技巧就可以了,当数据源中图片少时(比如你的例子只有一个图片),将数据的数据重复复制2份或者更多份,再绑定就可以了。


    知识改变命运,奋斗成就人生!
    2010年8月16日 7:59
    版主

全部回复

  • 只有在div范围以内有显示不完的内容时,滚动才有用啊。
    2010年8月16日 6:30
  • 只有在div范围以内有显示不完的内容时,滚动才有用啊。

    你好,你的这句话我的理解就是   显示信息总长度小于div宽度才可以显示。如果真是这样的话,我目前的信息长度是小于div的宽度的,但就是由于小于div的宽度,所以导致滚动失效。如果信息多了以后总长度大于div宽度,这样的话滚动效果就可以使用了。

     

    针对以上问题,我做了一个弥补的方法,就是在信息少的情况下,我在页面添加<mequee>标签,使得滚动形式不是无缝形式。如果满足条件以后,按正常无缝滚动显示显示。当然这只是我个人的解决方法,并不完完美。还是期待高手提供更有效的方法

    2010年8月16日 7:13
  • 你好!

    一般情况下,没有超出范围就不需要滚动。如果你的确要这样做使用一个技巧就可以了,当数据源中图片少时(比如你的例子只有一个图片),将数据的数据重复复制2份或者更多份,再绑定就可以了。


    知识改变命运,奋斗成就人生!
    2010年8月16日 7:59
    版主