圖片跑馬燈
在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.IO
Imports 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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""" & 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#。
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
