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

最新推荐文章于 2022-08-12 09:15:42 发布
最新推荐文章于 2022-08-12 09:15:42 发布
阅读量2.5k 收藏 5
点赞数
分类专栏： web开发技术资料 文章标签： .net border function float div hyperlink
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dafeidf/article/details/2754724
版权

marquee图片无缝滚动

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

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

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

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

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

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

scrollWidth:  获取对象的滚动宽度

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

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

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

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

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

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

  1. <%@ Page language="c#" Codebehind="Index.aspx.cs" AutoEventWireup="false" Inherits="ceshi.Index" %>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
  3. <HTML>
  4.     <HEAD>
  5.         <title>首页</title>
  6.         <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
  7.         <meta content="C#" name="CODE_LANGUAGE">
  8.         <meta content="JavaScript" name="vs_defaultClientScript">
  9.         <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
  10.         <style type="text/css">
  11. <!--
  12. #demo {
  13. background: #FFF;
  14. overflow:hidden;
  15. border: 0px dashed #CCC;
  16. width: 997px;
  17. }
  18. #demo img {
  19. border: 3px solid #F2F2F2;
  20. }
  21. #indemo {
  22. float: left;
  23. width: 1500%;
  24. }
  25. #demo1 {
  26. float: left;
  27. }
  28. #demo2 {
  29. float: left;
  30. }
  31. -->
  32. </style>
  33.     </HEAD>
  34.     <body style="MARGIN: 0px; POSITION: absolute">
  35.         <form id="Form1" method="post" runat="server">
  36. <table width="760" align="center" border="0">
  37.                                 <tr>
  38.                                     <td align="center">
  39.                                         <div id="demo">
  40. <div id="indemo">
  41. <div id="demo1">
  42.                                             <!--   下面是你要显示的内容   --><asp:DataList id="DataList5" runat="server" RepeatDirection="Horizontal" CellPadding="5" CellSpacing="5"
  43.                                                 style="DISPLAY:inline">
  44.                                                 <ItemTemplate><a href='<%# "cpinfo.aspx?id="+DataBinder.Eval(Container.DataItem,"cid") %>' title=<%# DataBinder.Eval(Container.DataItem,"mingcheng") %>>
  45.                                                     <asp:Image id=Image4 runat="server" ImageUrl='<%# "chanpinimg//"+DataBinder.Eval(Container.DataItem,"tupian") %>' Width="136px" Height="114px">
  46.                                                     </asp:Image></a><br>
  47.                                                     <br>
  48.                                                     <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) %>'>
  49.                                                     </asp:HyperLink>
  50.                                                 </ItemTemplate>
  51.                                             </asp:DataList>
  52.                                             <!--   显示的内容结束！   -->
  53.                                         </div>
  54. <div id="demo2"></div>
  55. </div>
  56. </div>
  57.                                         <script>
  58. <!--
  59. var speed=5; //数字越大速度越慢
  60. var tab=document.getElementById("demo");
  61. var tab1=document.getElementById("demo1");
  62. var tab2=document.getElementById("demo2");
  63. tab2.innerHTML=tab1.innerHTML;
  64. function Marquee(){
  65. if(tab2.offsetWidth-tab.scrollLeft<=0)
  66. tab.scrollLeft-=tab1.offsetWidth
  67. else{
  68. tab.scrollLeft++;
  69. }
  70. }
  71. var MyMar=setInterval(Marquee,speed);
  72. tab.onmouseover=function() {clearInterval(MyMar)};
  73. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
  74. -->
  75. </script>
  76.                                     </td>
  77.                                 </tr>
  78.                             </table>
  79.         </form>
  80.     </body>
  81. </HTML>

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

图片向下无缝滚动

<style type="text/css">
<!--
#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="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>

<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
tab.scrollTop=tab.scrollHeight
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
else{
tab.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>
 
--------------------------------------------------------
 
图片向左无缝滚动

<style type="text/css">
<!--
#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="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>

<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
 
------------------------------------------------------

图片向右无缝滚动

<style type="text/css">
<!--
#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="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>

<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--;
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

dafeidf
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
C#图片轮播
weixin_30706507的博客
07-19 1545
图片轮播无缝版： public partial class ImageCarouselExt : Control { #region /// <summary> /// 动画播放时间间隔定时器 /// </summary> private Timer carousel...
marquee图片无缝滚动（上下左右均可）
11-17
**标题解析：** "marquee图片无缝滚动（上下左右均可）" 这个标题涉及到...通过以上分析，我们可以了解到`<marquee>`标签和相关插件在实现图片无缝滚动效果中的应用和配置方法，以及它们在网页设计和开发中的注意事项。
C#加载滚动图片
糊涂鱼的世界
05-21 1788
#region 加载滚动图片 public void load_setimg() { DirectoryInfo TheFolder = new DirectoryInfo(@"F:\laji\VS2010\FaceRec_Demo0\FaceRec\ORL\s41");//文件路径 for (int i = 0; i 0 && TheFolder.GetFiles()[i].Extension
marquee标签如何实现无缝滚动跑马灯效果
yunduanaoligei的博客
10-27 4477
今天分享下marquee标签如何实现无缝滚动跑马灯效果，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 标签，它是成对出现的标签，首标签和尾标签之间的内容就是滚动内容。标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它们都是可选的。 今日在做微信端的大转盘抽奖时，想把所有的消费者的抽奖活动纪
图片无缝滚动marquee（.net动态数据填充）
zkqwalkon的专栏
11-19 602
 marquee图片无缝滚动网上好多这类的东西都不太好用，而且基本上也都是静态数据，今天发个.net动态添加图片无缝滚动的效果！先了解一下对象的几个的属性：innerHTML:    设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度。scrollLeft:   设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离sc
marquee图片无缝拼接滚动
热门推荐
zhuyu19911016520
04-25 1万+
marquee图片无缝滚动 先了解一下对象的几个的属性： innerHTML:     设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft:    设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:     设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距
详解vue 自定义marquee无缝滚动组件
10-17
在本文中，我们将深入探讨如何在 Vue 中自定义一个基于 `marquee` 的无缝滚动组件。`marquee` 是一种创建滚动文本效果的方式，常用于网站中展示不断滚动的信息，如新闻标题或广告。然而，HTML5 中的原生 `marquee` ...
JS与HTML结合使用marquee标签实现无缝滚动效果代码
10-22
主要介绍了JS与HTML结合使用marquee标签实现无缝滚动效果代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
jQuery模拟Marquee实现无缝滚动效果完整实例
10-21
主要介绍了jQuery模拟Marquee实现无缝滚动效果,结合完整实例形式分析了jQuery针对图片与文字的无缝滚动效果实现技巧,需要的朋友可以参考下
动态文字无缝滚动
11-15
在本文中，我们将深入探讨如何实现基于SuperSlide的动态文字无缝滚动，以及如何从后台动态获取数据并实现数据改变时的无缝刷新。 首先，让我们了解什么是SuperSlide。SuperSlide是一个基于jQuery的插件，专门用于...
js代码 无缝滚动效果
06-11
js代码 无缝滚动 js代码 无缝滚动 js代码 无缝滚动
利用Marquee实现无缝循环滚动文字
02-25
MARQUEE属性与用法，能实现无缝循环滚动文字，上下，左右都可以
.net中实现图片的横向(竖直)滚动（轮播）
long546324的专栏
04-29 750
[color=blue]图片横向滚动（轮播）[/color] [code="html"] 图片横向轮播 #demo { background: #FFF; overflow:auto; border: 1px dashed #CCC; ...
javascript 图片滚动
javaSamBlog
08-02 160
var sina = { $ : function(objName) { if (document.getElementById) { return eval('document.getElementById("' + objName + '")') } else { return eval('document.all.' ...
动态修改的图片滚动效果(asp.net版本)
㊣-天健君BLOG
09-10 2264
我讲的这个是通过css+div实现的，不是通常的用flash实现的，类似CSDN首页的变化广告效果。声明我参考了   校服男生   的文章。先看一下效果图(如http://jkx.suse.edu.cn/new右下角图片滚动效果)，实现很简单，请大家仔细看看如下介绍：首先建立一个页面test.aspx需要包含如下几个JS文件：                        （文
无缝滚动效果（鼠标移入暂停、单图暂停一段时间然后继续效果）
m0_51024444的博客
08-12 390
无缝滚动效果（鼠标移入暂停、单图暂停一段时间然后继续效果）
IIS是什么 iis是用来做什么的?
sakura379的博客
05-13 1万+
S全程为Internet Information Service（Internet信息服务），它的功能是提供信息服务，如架设http、ftp服务器等，是WindowsNT内核的系统自带的，不需要下载 什么是 Internet Information Server(IIS)? Microsoft IIS 是允许在公共Intranet或Internet上发布信息的Web服务器。Internet Inf...
html marquee无缝滚动图片
最新发布
08-14
要实现无缝滚动图片的效果，你可以使用HTML的marquee标签结合一些CSS样式来完成。以下是一个示例代码： ```html <!DOCTYPE html> .marquee-container { width: 100%; overflow: hidden; } .marquee-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值