图片跑马灯
先看看效果：
?
在IE瀏覽時，圖片跑馬是很流暢的，但在生成動畫時，有點跳。
本功能應用Jquery喔，另外Insus.NET把它寫在一個用戶控件上，在頁面需要顯示時，拉進去即可。
aspx:
View Code <%@?Page?Language="VB"?AutoEventWireup="false"?CodeFile="Default.aspx.vb"?Inherits="_Default"?%><%@?Register?Src="SiteControls/SlideMarquee.ascx"?TagName="SlideMarquee"?TagPrefix="uc1"?%>
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head?runat="server">
????<title></title>
????<script?src='<%=?ResolveUrl("~/Scripts/jquery-1.7.1.js")?%>'?type="text/javascript"></script>
</head>
<body>
????<form?id="form1"?runat="server">
????<div>??????
???????<br?/>
????????<uc1:SlideMarquee?ID="SlideMarquee1"?runat="server"?Speed="15"?Width="160"?Height="120"?/>
????</div>
????</form>
</body>
</html>
?
用戶控件有寫了三個屬性，Speed設置跑馬燈的滑動速度，Width跑馬燈圖片的寬度，Height是跑馬燈圖片的高度。
用戶控件：
View Code <%@?Control?Language="VB"?AutoEventWireup="false"?CodeFile="SlideMarquee.ascx.vb"????Inherits="SiteControls_SlideMarquee"?%>
<style?type="text/css">
????*
????{
????????margin:?0;
????????padding:?0;
????}
????img
????{
????????border:?none;
????}
????#slide
????{
????????overflow:?hidden;
????}
????ul
????{
????????list-style:?none;
????}
????li
????{
????????float:?left;
????}
????.slideul1
????{
????????width:?3999px;
????}
</style>
<div?id="slide">
????<ul?class="slideul1">
????????<li?class="slideli1">???????????
????????????????<asp:Literal?ID="LiteralSM"?runat="server"></asp:Literal>???????????
????????????<li?class="slideli2"></li>
????</ul>
</div>
<script?type="text/javascript">??????
????var?_speed?=?<asp:Literal?ID="LiteralJsCode"?runat="server"></asp:Literal>
????var?_slide?=?$("#slide");
????var?_slideli1?=?$(".slideli1");
????var?_slideli2?=?$(".slideli2");
????_slideli2.html(_slideli1.html());
????function?Marquee()?{
????????if?(_slide.scrollLeft()?>=?_slideli1.width())
????????????_slide.scrollLeft(0);
????????else?{
????????????_slide.scrollLeft(_slide.scrollLeft()?+?1);
????????}
????}
????$(function?()?{????????
????????var?sliding?=?setInterval(Marquee,?_speed)
????????_slide.hover(function?()?{????????????
????????????clearInterval(sliding);
????????},?function?()?{???????????
????????????sliding?=?setInterval(Marquee,?_speed);
????????});
????});
</script>
?
從上面的代碼中，Insus.NET有用了兩個asp:Literal 控件，作為可傳入參數。一個將是顯示圖片，另一個是傳入跑馬燈滑動速度。
xxx.asc.vb:
View Code Imports?System.IOImports?System.Web.UI.HtmlControls
Imports?System.Xml
Imports?Insus.NET
Partial?Class?SiteControls_SlideMarquee
????Inherits?System.Web.UI.UserControl
????Private?_Speed?As?Integer?=?10
????Private?_Width?As?Integer?=?80
????Private?_Height?As?Integer?=?60
????Public?WriteOnly?Property?Speed()?As?Integer
????????Set(value?As?Integer)
????????????_Speed?=?value
????????End?Set
????End?Property
????Public?WriteOnly?Property?Width()?As?Integer
????????Set(value?As?Integer)
????????????_Width?=?value
????????End?Set
????End?Property
????Public?WriteOnly?Property?Height()?As?Integer
????????Set(value?As?Integer)
????????????_Height?=?value
????????End?Set
????End?Property
????Protected?Sub?Page_Load(sender?As?Object,?e?As?EventArgs)?Handles?Me.Load
????????Me.LiteralJsCode.Text?=?_Speed
????????Dim?di?As?New?DirectoryInfo(HttpContext.Current.Server.MapPath(InsusBase.SlideMarqueeImageDirectory))
????????Dim?fiArray?As?FileInfo()?=?di.GetFiles()
????????Dim?s?As?String?=?""
????????For?i?As?Integer?=?0?To?fiArray.Length?-?1
????????????s?&=?"<li><img?src="""?&?ResolveUrl(InsusBase.SlideMarqueeImageDirectory)?&?fiArray(i).Name?&?"""?width="""?&?_Width?&?"""?height="""?&?_Height?&?"""?/></li>"
????????Next
????????Me.LiteralSM.Text?=?"<ul?class=""slideul2"">"?&?s?&?"</ul>"
????End?Sub
End?Class
?
上面代碼重點部分，是循環存放跑馬燈的目錄所有圖片文件。即也是這篇http://www.cnblogs.com/insus/archive/2012/03/08/2385223.html?輸出圖片的目錄。
另外由于時間關系，Insus.NET只是照搬專案可執行代碼，并沒有把它轉寫為C#。
?
總結
- 上一篇： 软件测试——JUnit中的参数化测试
- 下一篇： 准爸爸日记——20120311