网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 Javascript实现跑马灯效果的简单实例
内容
    下面小编就为大家带来一篇Javascript实现跑马灯效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。
    页面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后台代码：
    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();
      }
    数据库表：
    USE [Enterprise]
    GO
    /****** 对象: 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
    实体类：
    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实现跑马灯效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/20 0:38:11