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实现跑马灯效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。