下面小编就为大家带来一篇Javascript实现跑马灯效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。
页面html:
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) }
cs后台代码:
private void BindPics(int comId)
{
List
StringBuilder sb = new StringBuilder();
if (pic == null || pic.Count < 1)
{
imgShows.InnerHtml = string.Empty;
return;
}
sb.Append("
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实现跑马灯效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考