Javascript模拟Marquee

     在一个项目中,本来是用Marquee实现滚动新闻的,因为客户希望页面一加载就能看到新闻,而不是加载后才慢慢出现.所以在网络上查找解决方案,找到一篇用Javascript模拟Marquee的文章,稍作改动后就用在工程中了,感觉比Marquee好多了.上代码,是个用户控件的代码:

 

<%@ Control Language="C#" AutoEventWireup="true" Codebehind="GG.ascx.cs" Inherits="gxasti.Modules.GG" %>
<div id="header_demo" style="overflow:hidden; width:500px;">
    <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td id="header_demo1" nowrap>
                <!--滚动头条-->
                <asp:Repeater ID="repColumn" runat="server">
                    <ItemTemplate>
                        &nbsp;&nbsp;<a target="_blank" href="News_View.aspx?SubWebItemNo=<%# DataBinder.Eval(Container.DataItem, "SubWebItemNo") %>&id=<%# DataBinder.Eval(Container.DataItem, "id") %>"><font
                            style="font-size: 14px; font-weight: bold; color: #ff8a00;">·<%# DataBinder.Eval(Container.DataItem, "titles")%></font></a>
                    </ItemTemplate>
                </asp:Repeater>
            </td>
            <td id="header_demo2" nowrap>
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript">

    //滚动头条
    //滚动效果
    var header_demo = document.getElementById("header_demo");
    var header_demo1 = document.getElementById("header_demo1");
    var header_demo2 = document.getElementById("header_demo2");
    var speed=20;    //数值越大滚动速度越慢
    header_demo2.innerHTML = header_demo1.innerHTML;

    function Marquee(){
        //如果内容宽度比容器可视宽度小,不滚动,也不显示第二部分
        if(header_demo1.clientWidth > header_demo.clientWidth)
        {
            if(header_demo2.offsetWidth-header_demo.scrollLeft<=0)
                header_demo.scrollLeft-=header_demo1.offsetWidth
            else{
                header_demo.scrollLeft++
            }
        }
        else
        {
            header_demo2.style.display = "none";
        }
    }
    var MyMar = setInterval(Marquee,speed);
    header_demo.onmouseover = function(){clearInterval(MyMar)}
    header_demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}
</script>

 

 

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace gxasti.Modules
{
    public partial class GG : System.Web.UI.UserControl
    {
        gxasti.BLL.News news = new gxasti.BLL.News();
        protected string viewLink = string.Empty;
        protected string listLink = string.Empty;
        gxasti.BLL.Base_UnitMainWebItem model = new gxasti.BLL.Base_UnitMainWebItem();
        string _columnName = string.Empty;
        string _columnId = string.Empty;
        /**//// <summary>
        /// 栏目名称
        /// </summary>
        public string ColumnName
        {
            get { return _columnName; }
            set { _columnName = value; }
        }

        /**//// <summary>
        /// 栏目ID
        /// </summary>
        public string ColumnNo
        {
            get { return _columnId; }
            set { _columnId = value; }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                repColumn.DataSource = news.GetList("SubWebItemNo like '0040%' and sele_news=1 and CheckFlag=1", 6);
                repColumn.DataBind();
            }
        }
    }
}