datalist动态滚动效果

 

在页面总会有进行动态滚动的，有时候我们会用HTML标签的Marquee来实现滚动，但我们都会看到滚动是间断的，这不是很扯淡，在对于动态的datalist来讲，做成不间断的连续流动增进了页面的效果，下面来讲讲各个方向的滚动吧 

<div id="list5-content">
                    <div id="demo" style="overflow:hidden;  height:160px">
                        <table border="0" cellspacing="0" cellpadding="0" width="100%">
                            <tr>
                                <td id="demo1">
                                    <asp:DataList ID="dtZS" runat="server">
                                        <ItemTemplate >
                                            <table width="100%">    
                                                <tr>
                                                    <td>
                                                        <img src="../Image/img2.gif" />
                                                    </td>
                                                    <td width="300px">
                                                        <a href="www.baidu.com?id=<%#Eval("Id")%>" target="_blank" title="<%# Eval("Message_Title")%>"
                                                            style='<%# Eval("color")%>'>
                                                            <%# SemedWeb.Common.SplitString.SplitStrings(Eval("Message_Title").ToString(), 21,1)%>
                                                            <asp:Image ID="ImgZsNews" runat="server" /></a>
                                                    </td>
                                                    <td width="80px">
                                                        [<%#Eval("Message_time", "{0:yyyy-MM-dd}")%>]
                                                    </td>
                                                </tr>
                                            </table>
                                        </ItemTemplate>
                                    </asp:DataList>
                                </td>
                            </tr>
                            <tr>
                                <td id="demo2"></td>
                            </tr>
                        </table>
<script>//向左滚动
                             var speed = 50
                             demo2.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>

                        <script>//向右滚动
                             var speed = 50
                             demo2.innerHTML = demo1.innerHTML
                             function Marquee() {
                                 if ( 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>

                        <script>//向上滚动
                             var speed = 50
                             demo2.innerHTML = demo1.innerHTML
                             function Marquee() {
                                 if (demo2.offsetTop - demo.scrollTop <= 0)
                                     demo.scrollTop -= demo1.offsetHeight
                                 else {
                                     demo.scrollTop++
                                 }
                             }
                             var MyMar = setInterval(Marquee, speed)
                             demo.onmouseover = function() { clearInterval(MyMar) }
                             demo.onmouseout = function() { MyMar = setInterval(Marquee, speed) }
                        </script>

                        <script>//向下滚动
                             var speed = 50
                             demo2.innerHTML = demo1.innerHTML

　　　　　　　　 　　             demo.scrollTop=demo.scrollHeight


                             function Marquee() {
                                 if (demo2.offsetTop - demo.scrollTop >= 0)
                                     demo.scrollTop += demo1.offsetHeight
                                 else {
                                     demo.scrollTop--
                                 }
                             }
                             var MyMar = setInterval(Marquee, speed)
                             demo.onmouseover = function() { clearInterval(MyMar) }
                             demo.onmouseout = function() { MyMar = setInterval(Marquee, speed) }
                        </script>
                    </div>

                    </div>

 

 上班偷偷写的，~~~

 

转载于:https://www.cnblogs.com/lijie-0821/archive/2011/10/24/2222729.html