Javascript實(shí)現(xiàn)跑馬燈效果的簡(jiǎn)單實(shí)例

    下面小編就為大家?guī)硪黄狫avascript實(shí)現(xiàn)跑馬燈效果的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。
    頁(yè)面html：
    <div>
                <div id="imgShows" runat="server">
                  <div id="demo">
                    <table cellspacing="0" cellpadding="0" cellspace="0">
                      <tr>
                        <td id="demo1" valign="top" runat="server">
                        </td>
                        <td id="demo2" valign="top">
                        </td>
                      </tr>
                    </table>
                  </div>
                  <script type="text/javascript">
                    var speed = 10
                    var demo = document.getElementById("demo");
                    var demo1 = document.getElementById("demo1");
                    var demo2 = document.getElementById("demo2");
                    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>
                </div>
              </div>
    cs后臺(tái)代碼：
    private void BindPics(int comId)
      {
        List<Model.Pic> pic = DAO.PicDao.GetPics(comId);
        StringBuilder sb = new StringBuilder();
        if (pic == null || pic.Count < 1)
        {
          imgShows.InnerHtml = string.Empty;
          return;
        }
        sb.Append("<table width=\"100%\" border=\"0\" align=\"center\" cellpadding=\"0\"cellspacing=\"10px\"><tr>");
        for (int i = 0; i < pic.Count; i++)
        {
          Model.Pic p = pic[i];
          sb.Append(" <td width=\"200\"><a href=\"" + p.Href + "\"><img src=\"../" + p.Src + "\" border='0' title=\"" + p.Title + "\" alt=\"" + p.Title + "\"></a></td>");
        }
        sb.Append("</tr></table>");
        demo1.InnerHtml = sb.ToString();
      }
    數(shù)據(jù)庫(kù)表：
    USE [Enterprise]
    GO
    /****** 對(duì)象: Table [dbo].[Pics]  腳本日期: 03/17/2011 19:26:27 ******/
    SET ANSI_NULLS ON
    GO
    SET QUOTED_IDENTIFIER ON
    GO
    SET ANSI_PADDING ON
    GO
    CREATE TABLE [dbo].[Pics](
     [Id] [int] IDENTITY(1,1) NOT NULL,
     [ComId] [int] NOT NULL,
     [Title] [varchar](50) COLLATE Chinese_PRC_CI_AS NULL,
     [Href] [varchar](255) COLLATE Chinese_PRC_CI_AS NULL,
     [Src] [varchar](255) COLLATE Chinese_PRC_CI_AS NOT NULL,
    PRIMARY KEY CLUSTERED 
    (
     [Id] ASC
    )WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
    ) ON [PRIMARY]
    GO
    SET ANSI_PADDING OFF
    實(shí)體類：
    public class Pic
      {
        public int Id { set; get; }
        public int ComId { set; get; }
        public Model.CompanyModel CompanyModel { set; get; }
        public string Title { set; get; }
        public string Src { set; get; }
        public string Href { set; get; }
      }
    以上這篇Javascript實(shí)現(xiàn)跑馬燈效果的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考