不间断跑马灯

最新推荐文章于 2025-08-14 11:52:26 发布
原创 最新推荐文章于 2025-08-14 11:52:26 发布 · 957 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#border #function #xhtml #html #div #javascript

本文介绍了如何使用HTML和JavaScript实现网页元素的水平和垂直滚动效果，包括设置滚动速度和响应鼠标悬停停止滚动的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、水平方向运动

<!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>    

<title>Untitled Page</title>

</head>

<body >     

<div id="demo" style="OVERFLOW: hidden; WIDTH: 53%; HEIGHT: 50px">                    

<table cellpadding="0" align="left" border="0" cellspace="0">                       

<tr>                           

<td id="demo1" valign="top">         

<table width="100%" border="0" cellspacing="0" cellpadding="3" style="margin-top:6px">                   <tr>                      

<td>

<table width="10" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #FFFFFF;"> <tr>

<td>

<a href="#">

<img src="Images/small/38.jpg" height="44" border="0"  style="width: 118px" /></a>

</td>                      

</tr>                    

</table>                    

</td>                      

<td>

<table width="10" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #FFFFFF;"> <tr>

<td><a href="#"><img src="Images/small/39.jpg" height="44" border="0"                                 style="width: 118px" /></a>

</td>                      

 </tr>                    

</table>                    

</td>                      

<td>

<table width="10" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #FFFFFF;"> <tr><td><a href="#"><img src="Images/small/40.jpg" height="44" border="0"                                  style="width: 118px" /></a>

</td>                      

 </tr>                    

</table>                    

</td>                  

</tr>                

</table>    

</td>               

<td id="demo2" valign="top"></td>             

</tr>              

</table>            

</div>  

<script>   var speed1=20//速度数值越大速度越慢  

demo2.innerHTML=demo1.innerHTML  

 function Marquee1(){   if(demo2.offsetWidth-demo.scrollLeft<=0)  

demo.scrollLeft-=demo1.offsetWidth   else{   demo.scrollLeft++   }   }  

var MyMar1=setInterval(Marquee1,speed1)  

demo.onmouseover=function () {clearInterval(MyMar1)}  

demo.onmouseout=function () {MyMar1=setInterval(Marquee1,speed1)}  

 </script>

</body>

</html>

2、垂直方向运动

<!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>     <title>Untitled Page</title>

</head>

<body >

 <div id="maq" style="overflow: hidden; width: 150px; height: 180px">    <div id="mtext">

            家富富侨<br />             莎蔓莉莎美容院<br />             喜唰唰香辣涮<br />             晶华摄影<br />             法国梧桐咖啡厅 <br />             雅玫美容院<br />             花样年华<br />             藏御火疗宫<br />             维多俐娅咖啡厅<br />             大众口腔 <br />             7天连锁酒店<br />             邦吉咖啡<br />             三只耳<br />             太极虎韩式儿童摄影</div>                     

<div id="m0"></div>            

 </div>

<script language="javascript"> 

var speed=40 //调整滚动速度 

m0.innerHTML=mtext.innerHTML 

 function Marquee(){  if(m0.offsetTop-maq.scrollTop<=0)  maq.scrollTop-=mtext.offsetHeight  else{  maq.scrollTop++  }  } 

var MyMar=setInterval(Marquee,speed) 

 maq.onmouseover=function() {clearInterval(MyMar)} 

maq.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 

</script>

</body>

</html>

zh520
关注
如何自定义一个带有首尾间距得跑马灯效果
weixin_40138348的博客
12-24 2554
定义跑马灯效果我们使用Textview，根据画布得高宽和文字得高宽来设置跑马灯效果 直接上代码 public class HorizontalTextview extends AppCompatTextView { private float textLength = 0f; private float drawTextX = 0f;// 文本的横坐标 public boolean isStarting = false;// 是否开始滚动 private Paint pain
文字连续滚动的公告代码
asp、.net专栏
05-30 7162
    1.文字也是可以连续滚动的  2.文字也是可以连续滚动的  3.文字也是可以连续滚动的  4.文字也是可以连续滚动的  5.文字也是可以连续滚动的  6.文字也是可以连续滚动的          var speed=40  //调整滚动速度  m0.innerHTML=mtext.innerHTML  function Marquee(){  if(m0.offsetTop-maq.s
不间断跑马灯效果，非常棒
05-13
不间断跑马灯，连续滚动，代码简洁，易用，用在网页上效果非常不错，可下载试试看
HTML5示例
热门推荐
博客
06-06 12万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;!--作者： 日期：2017年9月18日--&gt; &lt;!--元信息标记meta charset定义文档的字符编码 &lt;meta charset="utf-8"/&gt; --&gt; &lt;!--定时刷新页面 &
HTML marquee标签属性详解
CWJ199002的博客
09-18 1757
请大家先看下面这段代码：<marqueedirection=upbehavior=scrollloop=3scrollamount=1scrolldelay=10align=topbgcolor=#ffffffheight=300 width=30%hspace=20 vspace=10onmouseover=this.stop() onmouseout=this.start(...
网页不间断跑马灯效果实现与代码解析
"该资源提供了一种实现不间断跑马灯效果的方法，主要应用于网页中，以连续滚动的方式展示内容。代码简洁，易于理解和使用。示例代码包含HTML和JavaScript部分，用于创建跑马灯效果，并且可以下载尝试。" 跑马灯效果...
TextView 实现文字滚动播放效果效果（跑马灯）
11-13
而“跑马灯”（Scrolling Text）效果则是`TextView`的一个特殊功能，它可以使超出`TextView`显示范围的文字自动从一端滚动到另一端，形成循环滚动的效果，常用于展示较长的标题或通知信息。下面我们将详细探讨如何...
HTML中MARQUEE标签实现文字移动
kataerdeshui的专栏
10-10 1985
例子：                       ·欢迎您光临！ ·HTML中MARQUEE标签实现文字移动... ·HTML中MARQUEE标签实现文字移动... marquee 属性介绍： 1、align ：设定标签内容的对齐方式 absbottom：绝对底部对齐（与g、p等字母的最下端
图片无缝滚动
weixin_30835933的博客
10-30 174
<!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> &lt...
11. HTML 中 DOCTYPE 的作用
weixin_64684095的博客
07-22 576
H5 的声明HTML5 的 DOCTYPE 声明HTML5 中的声明用于告诉浏览器当前文档使用的是 HTML5 的文档类型。它必须是文档中的第一行内容（在任何 HTML 标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE 的作用触发标准模式DOCTYPE声明的主要作用是让浏览器以标准模式（Standards Mode）来解析和渲染页面，而不是以兼容模式（Quirks Mode）。兼容性：在没有DOCTYPE声明的情况下，浏览器可能会进入兼容模式，这会导致页面的布局和样式表现不一致。
Python Day27 HTML 核心知识笔记及例题分析
ihghhfffv的博客
08-11 1170
HTML基础与网页结构简明指南 本文系统介绍了HTML的核心知识：HTML是超文本标记语言，通过标签描述网页结构。网页基本结构包含文档声明、头部(head)和主体(body)三部分，头部设置编码和标题，主体包含所有可见内容。详细讲解了常见HTML标签的用法： 文本标签(h1-h6标题、p段落、pre预格式文本) 列表标签(ol有序、ul无序、dl定义列表) 媒体与链接标签(img图片、a超链接) 表格标签(table及合并单元格属性) 语义标签(div布局、span行内样式) 特别说明了三种元素显示模式：块
HTML已死，HTML万岁——重新思考DOM的底层设计理念
2301_79342058的博客
08-07 1081
《Web技术亟需革新：DOM、HTML与CSS的历史包袱》文章指出当前Web技术发展陷入瓶颈，客户端体验十年未变。DOM已变得异常臃肿（Chrome中document.body含350+属性），HTML在过去15年几乎停滞，CSS布局存在心智模型错位问题。WebComponents因设计缺陷未能成为主流解决方案，SVG与CSS的融合反而造成混乱。文章认为当前技术堆栈已无法满足现代Web应用需求，建议开放底层能力，重新设计去除历史负担的新架构。作者呼吁关注Servo等实验性项目，认为Web技术亟需突破传统DO
HTML第三次作业
2301_81538927的博客
08-13 334
【代码】html第三次作业。
HTML 表格
csbysj2020
08-12 211
HTML 表格是网页设计中常用的一种元素，它能够帮助我们以表格形式展示数据。本文介绍了 HTML 表格的基本结构、属性、单元格操作以及高级用法，希望能对您有所帮助。在实际应用中，合理运用 HTML 表格，能够使您的网页更具可读性和实用性。
文件编辑html
weixin_38849487的博客
08-11 352
【web站点安全开发】任务4：JavaScript与HTML/CSS的完美协作指南
最新发布
不羁的博客
08-14 526
本文介绍了JavaScript在前端开发中的核心作用及其与HTML、CSS的协作方式。主要内容包括：1. JavaScript语言特性，通过对比表格展示其与Java在类型系统、面向对象、执行方式等方面的本质区别；2. JavaScript在HTML中的使用方法，包括<script>标签的三种放置位置（head/body/外部文件）；3. 四种常用输出方式（alert/write/innerHTML/console.log）；4. 语法特性比较（变量声明、数据类型、函数定义等）等
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值