这次的js脚本来源于 崔永祥 编写的通用不间断滚动JS封装类。
还是先上效果:
html代码如下:
设计时如下:
只要把所需滚动的代码拖放到该控件内就可以了。
现在设置的是向上滚动,高度为100px,宽度为当前浏览器窗口的宽。
再看一下预览效果,就可以实现滚动了:
下面来讲述控件的编码过程。
这次我们来继承WebControl类,这样方便一些。
[ParseChildren(false)] [ToolboxData("{0}:MarqueeControl runat=server/{0}:MarqueeControl")] public class MarqueeControl : WebControl
这里要讲一下ParseChildren这个特性,
ParseChildren(false),表示放在此控件内的元素将被解析成控件。
ParseChildren(true),表示放在此控件内的元素将被解析成属性 (Property)。
构造函数: public MarqueeControl() : base(HtmlTextWriterTag.Div) { }
使生成的html标签是div。
新增的属性如下:
[Description("滚动方向 (默认为 向上滚动)")] [TypeConverter(typeof(DirectionType))] public DirectionType Direction
[Description("滚动的步长 (默认值为2,数值越大,滚动越快)")] public int Step
[Description("定时器 (默认值为50,数值越小,滚动的速度越快,1000=1秒,建议不小于20)")] public int Timer
[Description("间歇停顿延迟时间 (默认为0不停顿,1000=1秒)")] public int DelayTime
[Description("开始时的等待时间 (默认或0为不等待,1000=1秒)")] public int WaitTime
[Description("间歇滚动间距 (默认为50, -1禁止鼠标控制)")] public int ScrollStep
[Description("客户端名称 默认为ClientID")] public string ClientInstanceName
[Description("客户端自定义脚本")] public string ClientScript
这里就不一一介绍啦,选几个吧。
Direction设计时属性对话框中如下:
变为可选择的项,
是通过[TypeConverter(typeof(DirectionType))] 来实现的.
DirectionType是一个枚举:
public enum DirectionType { /// summary /// 下上滚动 /// /summary Top = 0, /// summary /// 向下滚动 /// /summary Bottom = 1, /// summary /// 向左滚动 /// /summary Left = 2, /// summary /// 向右滚动 /// /summary Right = 3 }
ClientInstanceName是生成脚本的构造出来的Marquee实例,例如:var marq=new Marquee(id);
ClientScript为在开启滚动之前的脚本,可自行编写。
接下来就是输出脚本的代码,内嵌的控件代码则会自动输出的,不需要做处理。
protected override void OnPreRender(EventArgs e) { if (!Page.ClientScript.IsClientScriptIncludeRegistered("MarqueeControlJS")) Page.ClientScript.RegisterClientScriptInclude("MarqueeControlJS", Page.ClientScript.GetWebResourceUrl(this.GetType(), "Hxj.Web.UI.js.marquee.js")); string clientName = this.ClientInstanceName; StringBuilder script = new StringBuilder(); script.AppendLine(); script.Append("var "); script.Append(clientName); script.Append("=new Marquee(\""); script.Append(this.ClientID); script.Append("\","); script.Append(this.Direction.GetHashCode().ToString()); script.Append(","); script.Append(this.Step.ToString()); script.AppendLine(");"); if (this.Width.Type == UnitType.Pixel) { script.Append(clientName); script.Append(".Width="); script.Append(this.Width.Value.ToString()); script.Append(";"); } if (this.Height.Type == UnitType.Pixel) { script.Append(clientName); script.Append(".Height="); script.Append(this.Height.Value.ToString()); script.Append(";"); } script.Append(clientName); script.Append(".Timer="); script.Append(this.Timer.ToString()); script.Append(";"); script.Append(clientName); script.Append(".DelayTime="); script.Append(this.DelayTime.ToString()); script.Append(";"); script.Append(clientName); script.Append(".WaitTime="); script.Append(this.WaitTime.ToString()); script.Append(";"); script.Append(clientName); script.Append(".ScrollStep="); script.Append(this.ScrollStep.ToString()); script.AppendLine(";"); if (!string.IsNullOrEmpty(ClientScript)) { script.AppendLine(ClientScript); } script.Append(clientName); script.AppendLine(".Start();"); if (!this.Page.ClientScript.IsStartupScriptRegistered("MarqueeControlStartscript" + this.ClientID)) this.Page.ClientScript.RegisterStartupScript(typeof(string), "MarqueeControlStartscript" + this.ClientID, script.ToString(), true); base.OnPreRender(e); }
也可根据自己的需求在客户端用js改变滚动的效果。
这样一个无间隙滚动控件就编写完成了。
下载
还是先上效果:
html代码如下:
![image image](https://i-blog.csdnimg.cn/blog_migrate/dcd535ec1a30e656b934e6096ffeb871.png)
设计时如下:
![image image](https://i-blog.csdnimg.cn/blog_migrate/c4fd19f46e17e806c10411c2a88ec5f3.png)
只要把所需滚动的代码拖放到该控件内就可以了。
现在设置的是向上滚动,高度为100px,宽度为当前浏览器窗口的宽。
再看一下预览效果,就可以实现滚动了:
![image image](https://i-blog.csdnimg.cn/blog_migrate/9ad375b3d4ab09e26cfb9a55c117b404.png)
下面来讲述控件的编码过程。
这次我们来继承WebControl类,这样方便一些。
[ParseChildren(false)] [ToolboxData("{0}:MarqueeControl runat=server/{0}:MarqueeControl")] public class MarqueeControl : WebControl
这里要讲一下ParseChildren这个特性,
ParseChildren(false),表示放在此控件内的元素将被解析成控件。
ParseChildren(true),表示放在此控件内的元素将被解析成属性 (Property)。
构造函数: public MarqueeControl() : base(HtmlTextWriterTag.Div) { }
使生成的html标签是div。
新增的属性如下:
[Description("滚动方向 (默认为 向上滚动)")] [TypeConverter(typeof(DirectionType))] public DirectionType Direction
[Description("滚动的步长 (默认值为2,数值越大,滚动越快)")] public int Step
[Description("定时器 (默认值为50,数值越小,滚动的速度越快,1000=1秒,建议不小于20)")] public int Timer
[Description("间歇停顿延迟时间 (默认为0不停顿,1000=1秒)")] public int DelayTime
[Description("开始时的等待时间 (默认或0为不等待,1000=1秒)")] public int WaitTime
[Description("间歇滚动间距 (默认为50, -1禁止鼠标控制)")] public int ScrollStep
[Description("客户端名称 默认为ClientID")] public string ClientInstanceName
[Description("客户端自定义脚本")] public string ClientScript
这里就不一一介绍啦,选几个吧。
Direction设计时属性对话框中如下:
![image image](https://i-blog.csdnimg.cn/blog_migrate/e1dc630abfd36db7019ba8d4ce50d508.png)
变为可选择的项,
是通过[TypeConverter(typeof(DirectionType))] 来实现的.
DirectionType是一个枚举:
public enum DirectionType { /// summary /// 下上滚动 /// /summary Top = 0, /// summary /// 向下滚动 /// /summary Bottom = 1, /// summary /// 向左滚动 /// /summary Left = 2, /// summary /// 向右滚动 /// /summary Right = 3 }
ClientInstanceName是生成脚本的构造出来的Marquee实例,例如:var marq=new Marquee(id);
ClientScript为在开启滚动之前的脚本,可自行编写。
接下来就是输出脚本的代码,内嵌的控件代码则会自动输出的,不需要做处理。
protected override void OnPreRender(EventArgs e) { if (!Page.ClientScript.IsClientScriptIncludeRegistered("MarqueeControlJS")) Page.ClientScript.RegisterClientScriptInclude("MarqueeControlJS", Page.ClientScript.GetWebResourceUrl(this.GetType(), "Hxj.Web.UI.js.marquee.js")); string clientName = this.ClientInstanceName; StringBuilder script = new StringBuilder(); script.AppendLine(); script.Append("var "); script.Append(clientName); script.Append("=new Marquee(\""); script.Append(this.ClientID); script.Append("\","); script.Append(this.Direction.GetHashCode().ToString()); script.Append(","); script.Append(this.Step.ToString()); script.AppendLine(");"); if (this.Width.Type == UnitType.Pixel) { script.Append(clientName); script.Append(".Width="); script.Append(this.Width.Value.ToString()); script.Append(";"); } if (this.Height.Type == UnitType.Pixel) { script.Append(clientName); script.Append(".Height="); script.Append(this.Height.Value.ToString()); script.Append(";"); } script.Append(clientName); script.Append(".Timer="); script.Append(this.Timer.ToString()); script.Append(";"); script.Append(clientName); script.Append(".DelayTime="); script.Append(this.DelayTime.ToString()); script.Append(";"); script.Append(clientName); script.Append(".WaitTime="); script.Append(this.WaitTime.ToString()); script.Append(";"); script.Append(clientName); script.Append(".ScrollStep="); script.Append(this.ScrollStep.ToString()); script.AppendLine(";"); if (!string.IsNullOrEmpty(ClientScript)) { script.AppendLine(ClientScript); } script.Append(clientName); script.AppendLine(".Start();"); if (!this.Page.ClientScript.IsStartupScriptRegistered("MarqueeControlStartscript" + this.ClientID)) this.Page.ClientScript.RegisterStartupScript(typeof(string), "MarqueeControlStartscript" + this.ClientID, script.ToString(), true); base.OnPreRender(e); }
也可根据自己的需求在客户端用js改变滚动的效果。
这样一个无间隙滚动控件就编写完成了。
下载