页面中跑马灯效果集锦

最新推荐文章于 2024-05-07 03:18:09 发布
最新推荐文章于 2024-05-07 03:18:09 发布
阅读量361 收藏
点赞数
分类专栏： web前端 文章标签： JavaScript HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_20591/article/details/81997651
版权


<html>
<head><title>跑马灯大全</title>
<script LANGUAGE="JavaScript">
<!-- Begin
var Mes=new Array();
Mes[0]="洪恩在线欢迎你！ ";
Mes[1]="感谢你关注电脑交互教程 ";
Mes[2]="网页制作技巧　之　跑马灯大全 ";
var place=1;
var i=0;
function scroll()
{
window.status=Mes[i].substring(0, place);
if (place >= Mes[i].length)
{
if(i<2)
{
i++;
place=1;
window.setTimeout("scroll()",50);
}
else
{
i=0;
place=1;
window.setTimeout("scroll()",50);
}
}
else {
place++;
window.setTimeout("scroll()",50);
}
}
// End -－>
</script>
</head>
<form name="shooterform" method="get">
<body οnlοad="scroll();">
<marquee>滚动的文字</marquee>
<marquee behavior=alternate>表示双向移动</marquee>
<marquee direction=left>表示运动方向向左</marquee>
<marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>
<marquee scrollamount="30">表示运动方向向左</marquee>
<marquee width=90%>
<a href="http://www.hongen.com/default.htm"　target=_blank>带有超链接的跑马灯!点我试试？</a><br />
<a href="http://www.hongen.com/pc/index.htm" target=_blank>还有一条呢!点我试试？</a>
</marquee>

<table width="93%" border="1" cellspacing="0" cellpadding="1" align="center" class="p1">
<tr>
<td width="42%">参数</td>
<td width="58%">用法介绍</td>
</tr>
<tr>
<td width="42%">behavior=scroll, slide, alternate</td>
<td width="58%">跑马方式：循环绕行，只跑一次就停住，来回往复运动</td>
</tr>
<tr>
<td width="42%">direction=left,right</td>
<td width="58%">跑马方向：从左向右，从右向左</td>
</tr>
<tr>
<td width="42%">loop=100</td>
<td width="58%">跑马次数：循环100次，如不写默认为一直循环</td>
</tr>
<tr>
<td width="42%">width=100%,height=200</td>
<td width="58%">跑马范围：宽为100%，高为200像素</td>
</tr>
<tr>
<td width="42%">scrollamount=20</td>
<td width="58%">跑马速度：数越大越快</td>
</tr>
<tr>
<td width="42%">scrolldelay=500</td>
<td width="58%">跑马延时：毫秒数，利用它可实现跃进式滚动</td>
</tr>
<tr>
<td width="42%">hspace=20，vspace=20</td>
<td width="58%">跑马区域与其它区域间的空白大小</td>
</tr>
<tr>
<td width="42%">bgcolor=#00FFCC</td>
<td width="58%">跑马区域的背景颜色</td>
</tr>
</table>
　　


</body>
</form>
</html>

iteye_20591
关注
专栏目录
web展现mysql_web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)
weixin_42509507的博客
02-22 856
本帖最后由 yoin 于 2019-11-21 16:24 编辑产品需求：LED跑马灯页面展示内容(班级电脑展示)setLED更改内容(老师电脑更改内容)LED页面及时更新内容设计思路：最初想法很简单，想仅用HTML+JS实现。但是还是太年轻了，老师更改内容后如何同步共享到班级电脑就是个问题了。1.cookie存储班级信息，success！2.session共享更改内容，failed！sessio...
页面中的跑马灯效果
05-13
非常简单实用的页面跑马灯效果，是向上滚动的一个效果，可以自己设置时间。
html跑马灯特效
05-18
电脑中的跑马灯，跑马灯在编程中，通常指有时需要用一矩形条显示少量用户特别关心的信息，这条信息串首尾相连，向一个方向循环滚动。证券业中常用“跑马灯”来显示不断变化的股票行情；实际应用中也常通过“跑马灯”来监视是否死机。
网页跑马灯效果，<marquee></marquee>标签
nicesa1的博客
11-13 8718
实现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“滚动的文字”语句，它的效果如下所示： 滚动的文字 　　适当的运用标签的参数，可以表现出不同的效果，请看下面的几个例子： 　　1、左右弹来弹去的跑马灯 弹来弹去跑马灯! 　 　实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示
前端实现文字跑马灯的三种方式
weixin_33936401的博客
11-05 1783
前言 最近写了一个文字跑马灯的项目需求，刚开始用js写，能够完成需求。后面想着换种方式(分别是html和css)来实现同一个需求,以减少性能消耗。 首先，需求分析: 需求点1.判断文字的长度和容器的长度，如果文字长度大于容器长度则开始滚动，否则不滚动； 需求点2.判断滚动滚动的结束，在结束的时间点触发事件(比如: 增减样式等操作)； 一、JS实现 思路: 1.判断文字的长度和容器的长度，如果文字长...
js实现文字跑马灯效果
10-20
代码使用了`window.onload`事件，确保在页面加载完毕后执行跑马灯效果的初始化。在初始化阶段，我们检查了文本内容的宽度是否已经超出了包裹器的宽度，如果超出则开始滚动，否则不执行滚动。 核心的滚动逻辑是通过`...
Android基于TextView不获取焦点实现跑马灯效果
08-31
在Android开发中，跑马灯效果通常用于显示一串较长的文本，使其在有限的空间内循环滚动，模拟出一种连续滚动的效果。这种效果在通知、标题或者提示信息中非常常见。在本例中，我们将讨论如何在不使TextView获取焦点...
详解微信小程序实现跑马灯效果（附完整代码）
10-17
这个例子中的跑马灯效果在用户滚动页面时将持续进行，当用户将鼠标悬停在跑马灯上时，动画会暂停。通过调整WXSS中的样式属性，如颜色、字体大小、动画速度等，你可以定制自己的跑马灯效果以适应不同的应用场景。 请...
原生JS实现跑马灯效果
12-11
跑马灯效果是一种常见的网页动态效果，通常用于展示滚动的文字或图片。在本文中，我们将探讨如何使用原生JavaScript来实现这一效果。首先，我们分析给出的代码结构和相关知识点。 1. HTML 结构： - 页面包含一个 `...
jQuery 跑马灯效果
06-10
在本案例中，我们将探讨一个名为"cxScroll"的jQuery插件，它可以帮助我们实现简单的无缝滚动跑马灯效果。 **jQuery基础**：jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax...
网页制作走马灯效果代码
05-25
网页制作走马灯效果代码 喜欢网页制作的人可以下载下来看看啊
跑马灯抽奖特效-固定概率
12-12
由前端计算固定抽到每个奖项的概率，跑马灯抽奖特效，并且每天抽奖次数不得超过3次
前端小案例——走马灯（文字水平轮播, 附源码）
前端小白一枚
01-31 3607
水平滚动的文本效果，可以通俗的来说也叫“走马灯”，这里博主用了两种方法实现。第一种是用gsap动画库完成的，这种方法更为简单也更为高效。第二种使用CSS动画完成的，这是一种常见的方式对于对gsap动画不熟悉的小伙伴，也可以参考这种方法。两种方式博主都提供了源码供大家参考学习。
前端开发：css3实现文字首尾衔接跑马灯
yman_pro的博客
06-19 8665
故事背景 事情是这样的，卤煮无意间得知一款外放效果宇宙无敌第一的手机！！！脑袋一热就趁着阿东618大促搞了一台，毕竟卤煮是一个地道的电子发烧友！！！但是当卤煮查询物流信息的时候。。。。。。 好吧，我这该死的探索欲，被这突兀的跑马灯吸引住了目光（ca，今天看样子是收不到货了！！！） 那就说说怎么实现它吧（这个梗接的就是这么硬） 效果图 逻辑描述 p标签包含俩span标签(提示的文字)，要两个span，或者2个以上，p标签定位，改变p标签left值进行运动，运动到第一个span标签的结尾处，看图！！！当第二
css3 文字走马灯,前端开发：css3实现文字首尾衔接跑马灯
weixin_33271064的博客
08-04 951
故事背景事情是这样的，卤煮无意间得知一款外放效果宇宙无敌第一的手机！！！脑袋一热就趁着阿东618大促搞了一台，毕竟卤煮是一个地道的电子发烧友！！！但是当卤煮查询物流信息的时候。。。。。。好吧，我这该死的探索欲，被这突兀的跑马灯吸引住了目光(ca，今天看样子是收不到货了！！！)那就说说怎么实现它吧(这个梗接的就是这么硬)效果图逻辑描述p标签包含俩span标签(提示的文字)，要两个span，或者2个以...
前端例程20220922：文本跑马灯效果
Naisu的各种笔记
09-22 703
文本跑马灯效果
2024年前端最新分别用Js和vue实现跑马灯效果(1)，面试前端开发自我介绍
最新发布
2401_84446787的博客
05-07 535
正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。()方法接收两个参数，第一个参数是将要推迟执行的函数名或者一段代码，第二个参数是推迟执行的毫秒数。在上面的跑马灯效果中，当打开页面的时候，等待两秒钟，它会自动调用start方法，实现动起来的效果。
前端优化-走马灯实现对比
guard_ring的博客
12-10 2360
传统的走马灯/轮播实现 无非是通过setTimeout来设置偏移量而已，但是这种方式非常的损耗性能，可能 一般人没有太大感觉，像我现在处理的走马灯数据最少有上千条，300条数据在页面展示就要10万多px了，ie页面直接卡死(chrome不会)。所以前端我就通过分块和js控制cssRule来动态实现。代码如下： for (let i = 0, len = ss.length; i < le
JS跑马灯效果实现（很好用）
热门推荐
杨春建的博客
09-08 4万+
原文地址：http://blog.csdn.net/yangsen251024/article/details/8614305 实现跑马灯效果的JS很多，但是很多不好用，下面介绍一个比较好用的。 好用之处在于： 1 支持一个页面多个跑马灯效果 2.支持跑马灯内容的异步加载 关键的实现代码，如果看不懂，可以跑这个列子 文字1 文字2 文字3 文字4 文字5 function
HTML跑马灯效果实现与样式控制
HTML跑马灯是一种常见的网页动态效果，它可以使文字或图片在页面上连续滚动、交替显示或者上下移动，从而吸引用户的注意力。跑马灯主要通过`<marquee>`标签来实现，这个标签在HTML4中被引入，但在HTML5中已被废弃，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值