Javascript实现跑马灯效果的简单实例
页面html：
<div>
<divid="imgShows"runat="server"style="padding-bottom:10px;">
<divid="demo"style="overflow:hidden;width:100%;height:190px">
<tablecellspacing="0"cellpadding="0"align="left"border="0"cellspace="0">
<tr>
<tdid="demo1"valign="top"runat="server">
</td>
<tdid="demo2"valign="top">
</td>
</tr>
</table>
</div>
<scripttype="text/javascript">
varspeed=10
vardemo=document.getElementById("demo");
vardemo1=document.getElementById("demo1");
vardemo2=document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML
functionMarquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
varMyMar=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>
</div>
</div>
cs后台代码：
privatevoidBindPics(intcomId)
{
List<Model.Pic>pic=DAO.PicDao.GetPics(comId);
StringBuildersb=newStringBuilder();
if(pic==null||pic.Count<1)
{
imgShows.InnerHtml=string.Empty;
return;
}
sb.Append("<tablewidth=\"100%\"border=\"0\"align=\"center\"cellpadding=\"0\"cellspacing=\"10px\"><tr>");
for(inti=0;i<pic.Count;i++)
{
Model.Picp=pic[i];
sb.Append("<tdwidth=\"200\"><ahref=\""+p.Href+"\"><imgsrc=\"../"+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/201119:26:27******/ SETANSI_NULLSON GO SETQUOTED_IDENTIFIERON GO SETANSI_PADDINGON GO CREATETABLE[dbo].[Pics]( [Id][int]IDENTITY(1,1)NOTNULL, [ComId][int]NOTNULL, [Title][varchar](50)COLLATEChinese_PRC_CI_ASNULL, [Href][varchar](255)COLLATEChinese_PRC_CI_ASNULL, [Src][varchar](255)COLLATEChinese_PRC_CI_ASNOTNULL, PRIMARYKEYCLUSTERED ( [Id]ASC )WITH(IGNORE_DUP_KEY=OFF)ON[PRIMARY] )ON[PRIMARY] GO SETANSI_PADDINGOFF
实体类：
publicclassPic
{
publicintId{set;get;}
publicintComId{set;get;}
publicModel.CompanyModelCompanyModel{set;get;}
publicstringTitle{set;get;}
publicstringSrc{set;get;}
publicstringHref{set;get;}
}
以上这篇Javascript实现跑马灯效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。