图片无缝滚动marquee（.net动态数据填充）

最新推荐文章于 2023-09-25 16:59:23 发布

zkqwalkon

最新推荐文章于 2023-09-25 16:59:23 发布

阅读量600

点赞数

分类专栏： ASP.NET 文章标签： .net border float hyperlink function div

ASP.NET 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

marquee图片无缝滚动

网上好多这类的东西都不太好用，而且基本上也都是静态数据，今天发个.net动态添加图片无缝滚动的效果！

先了解一下对象的几个的属性：

innerHTML: 设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth: 获取对象的滚动宽度

offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

-----------------------------------------------------------------------

图片向上无缝滚动（下边还有几个是向其他方向滚动的，你只要把下边的参照我这个改一下就可以实现各个方向的动态数据滚动了）
下边我是用datalist动态加载的内容然后无缝滚动的！

<%@ Page language="c#" Codebehind="Index.aspx.cs" AutoEventWireup="false" Inherits="ceshi.Index" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>首页</title> <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE"> <meta content="JavaScript" name="vs_defaultClientScript"> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema"> <mce:style type="text/css"></mce:style><mce:style type="text/css" mce_bogus="1"></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1"> #demo { background: #FFF; overflow:hidden; border: 0px dashed #CCC; width: 997px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 1500%; } #demo1 { float: left; } #demo2 { float: left; }</style> </HEAD> <body style="MARGIN: 0px; POSITION: absolute" mce_style="MARGIN: 0px; POSITION: absolute"> <form id="Form1" method="post" runat="server"> <table width="760" align="center" border="0"> <tr> <td align="center"> <div id="demo"> <div id="indemo"> <div id="demo1"> <asp:DataList id="DataList5" runat="server" RepeatDirection="Horizontal" CellPadding="5" CellSpacing="5" style="DISPLAY:inline" mce_style="DISPLAY:inline"> <ItemTemplate><a href='<%# "cpinfo.aspx?id="+DataBinder.Eval(Container.DataItem,"cid") %>' title=<%# DataBinder.Eval(Container.DataItem,"mingcheng") %>> <asp:Image id=Image4 runat="server" ImageUrl='<%# "chanpinimg//"+DataBinder.Eval(Container.DataItem,"tupian") %>' Width="136px" Height="114px"> </asp:Image></a><br> <br> <asp:HyperLink id=HyperLink3 runat="server" Target="_blank" NavigateUrl='<%# "cpinfo.aspx?id="+DataBinder.Eval(Container.DataItem,"cid") %>' ToolTip='<%# DataBinder.Eval(Container.DataItem,"mingcheng") %>' Text='<%# PartSubString(DataBinder.Eval(Container.DataItem,"mingcheng").ToString(),10) %>'> </asp:HyperLink> </ItemTemplate> </asp:DataList>  </div> <div id="demo2"></div> </div> </div> <mce:script type="text/javascript"></mce:script> </td> </tr> </table> </form> </body> </HTML>

------------------------------------------------------------

图片向下无缝滚动

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; height: 100px; text-align: center; float: left; } #demo img { border: 3px solid #F2F2F2; display: block; }</style>

向下滚动

<div id="demo"> <div id="demo1"> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> <mce:script type="text/javascript"></mce:script>

--------------------------------------------------------

图片向左无缝滚动

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; }</style> 向左滚动 <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> </div> <mce:script type="text/javascript"></mce:script>

------------------------------------------------------

图片向右无缝滚动

<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; }</style> 向右滚动 <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#" mce_href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" mce_src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> </div> <mce:script type="text/javascript"></mce:script>

zkqwalkon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片无缝滚动marquee（.net动态数据填充）

marquee图片无缝滚动网上好多这类的东西都不太好用，而且基本上也都是静态数据，今天发个.net动态添加图片无缝滚动的效果！先了解一下对象的几个的属性：innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度。scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离sc
复制链接

扫一扫