图片跑马灯

最新推荐文章于 2021-01-11 14:16:16 发布

weixin_33957648

最新推荐文章于 2021-01-11 14:16:16 发布

阅读量134

点赞数

文章标签： xhtml ui javascript ViewUI

先看看效果：

在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 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#。