Javascript实现跑马灯效果的简单实例

页面html：

<div>
<div id="imgShows" runat="server" style="padding-bottom: 10px;">
<div id="demo" style="overflow: hidden; width: 100%; height: 190px">
<table cellspacing="0" cellpadding="0" align="left" border="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实现跑马灯效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• 原生JS实现跑马灯效果
• 基于Marquee.js插件实现的跑马灯效果示例
• JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）
• JavaScript实现跑马灯抽奖活动实例代码解析与优化（一）
• javascript跑马灯抽奖实例讲解
• javascript新闻跑马灯实例代码
• JS实现状态栏跑马灯文字效果代码
• js文本框走动跑马灯效果代码分享
• javascript 单行文字向上跑马灯滚动显示
• js实现文字跑马灯效果