zoukankan      html  css  js  c++  java
  • ASP.NET中利用DataList实现图片无缝滚动

    这个问题之前也困扰我,后来解决了,拿出来分享下,以后用也方便,代码很容易看懂,不多说什么了

    1. <div id="demo" style="overflow: hidden;  441px; border: 0px">  
    2.         <table width="441" height="130" border="0" cellpadding="0" cellspacing="0" background="Images/img2/32.jpg">  
    3.             <tr>  
    4.                 <td align="center" id="demo1" valign="bottom">  
    5.                     <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" DataSourceID="ObjectDataSource1">  
    6.                         <ItemTemplate>  
    7.                             <table>  
    8.                                 <tr>  
    9.                                     <td>  
    10.                                         <asp:ImageButton ID="imgbtnInfo" runat="server" ImageUrl='<%#Eval("Spic") %>' OnClick="imgbtnInfo_Click"  
    11.                                             CommandArgument='<%#Eval("ID") %>' />  
    12.                                     </td>  
    13.                                 </tr>  
    14.                                 <tr>  
    15.                                     <td align="center">  
    16.                                         <asp:LinkButton ID="lkbtnInfo" CommandArgument='<%#Eval("ID") %>' runat="server"  
    17.                                             OnClick="lkbtnInfo_Click" CssClass="bb" Text='<%#Eval("Type") %>'></asp:LinkButton>  
    18.                                     </td>  
    19.                                 </tr>  
    20.                             </table>  
    21.                         </ItemTemplate>  
    22.                     </asp:DataList>  
    23.                     <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="SelectInfo"  
    24.                         TypeName="HotelDAL.KeFangServices"></asp:ObjectDataSource>  
    25.                 </td>  
    26.                 <%-- 这一步很重要 --%>  
    27.                 <td id="demo2" align="center" valign="bottom">  
    28.                 </td>  
    29.             </tr>  
    30.         </table>  
    31.     </div>  
    32.     <script>  
    33.         //滚动的速度,数值越大速度越慢  
    34.         var speed = 20  
    35.         demo2.innerHTML = demo1.innerHTML  
    36.         //从右至左   
    37.         function Marquee() {  
    38.             if (demo1.offsetWidth - demo.scrollLeft <= 0)  
    39.                 demo.scrollLeft = 0  
    40.             else  
    41.                 demo.scrollLeft++  
    42.         }  
    43.         var MyMar = setInterval(Marquee, speed)  
    44.         demo.onmouseover = function () { clearInterval(MyMar) }  
    45.         demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }   
    46.     </script>  
  • 相关阅读:
    二、Blender/Python API总览
    一、Blender/Python 快速入门
    【翻译】View Frustum Culling --3 Clip Space Approach – Extracting the Planes
    【翻译】View Frustum Culling --2 Geometric Approach – Extracting the Planes
    【翻译】 View Frustum Culling --1 View Frustum’s Shape
    列表切片
    numpy--深度学习中的线代基础
    基于正则表达式用requests下载网页中的图片
    Python基础知识整理
    C++ | boost库 类的序列化
  • 原文地址:https://www.cnblogs.com/ranran/p/4554473.html
Copyright © 2011-2022 走看看