`
还有也许
  • 浏览: 168499 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

页面中跑马灯效果集锦

阅读更多


<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 onload="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>

分享到:
评论

相关推荐

    jQuery 跑马灯效果

    在本案例中,我们将探讨一个名为"cxScroll"的jQuery插件,它可以帮助我们实现简单的无缝滚动跑马灯效果。 **jQuery基础**:jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax...

    多个跑马灯效果 demo

    在本示例“多个跑马灯效果 demo”中,我们将探讨如何在一个页面上实现多个TextView同时展现跑马灯效果。 首先,我们需要了解TextView的基本属性。TextView是Android中用于显示单行或多行文本的视图组件。在XML布局...

    跑马灯效果的多种实现

    跑马灯效果,又称滚动字幕或走马灯,是一种常见的UI设计元素,常用于显示过多信息无法一次性完全展示的情况,如网站公告、新闻标题滚动等。在IT领域,跑马灯效果可以通过多种编程语言和技术来实现。下面,我们将详细...

    android跑马灯效果,失去焦点也可以实现

    标题提到的"android跑马灯效果,失去焦点也可以实现"意味着即使控件没有获取到焦点,仍然可以保持滚动效果。这在设计用户界面时特别有用,因为有时候我们希望信息能够持续吸引用户的注意力,而不仅仅是当用户交互时...

    页面中的跑马灯效果

    在跑马灯效果中,你可以创建一个包含要滚动内容的`&lt;div&gt;`元素,例如: ```html 这是要滚动的文本或内容 ``` 2. CSS(Cascading Style Sheets): CSS用来控制网页的样式和布局。对于跑马灯,我们可以设置`&lt;div&gt;...

    使用TextView实现跑马灯效果

    本教程主要围绕如何在Android中使用`TextView` 实现跑马灯效果展开。首先,我们需要了解`TextView` 的基本属性和设置方法。在XML布局文件中,我们可以这样创建一个`TextView`: ```xml android:id="@+id/my_...

    跑马灯效果JQUERY

    在这个跑马灯效果中,JQuery主要用来操作DOM元素,控制内容的滚动显示。 `demo.html`是演示文件,它包含了HTML结构和JQuery脚本的引用。HTML部分通常会包含一个容器元素,用于承载跑马灯的内容,例如一个ul列表,每...

    JavaScript实现跑马灯效果

    本文将深入探讨如何使用JavaScript来实现跑马灯效果。 首先,我们需要理解跑马灯的基本原理。跑马灯效果通常是通过在一个固定区域显示一组元素(如图片),然后定期或根据用户交互改变显示的元素,形成一种循环滚动...

    jQueryMarquee跑马灯效果

    jQuery.Marquee是一款基于jQuery库的插件,用于实现跑马灯效果,也就是常说的滚动文本或滑动横幅。在网页设计中,这种效果常用于显示新闻更新、广告或者重要通知,因为它能在有限的空间内展示大量的信息。接下来,...

    支持多种形式的新闻滚动、跑马灯效果

    在IT行业中,新闻滚动和跑马灯效果是常见的动态展示方式,主要应用于网站、APP以及各种数字媒体平台,用于展示最新资讯、广告或重要通知。这些效果能够吸引用户的注意力,提高信息的可见度,同时也为界面增添了动态...

    经典的JavaScript跑马灯效果

    JavaScript跑马灯效果是一种常见的网页动态效果,常用于滚动显示新闻、公告或广告等信息,以节省网页空间并增加视觉吸引力。跑马灯效果通常基于JavaScript实现,通过定时器控制文本或图片在有限的显示区域里循环滚动...

    微信小程序实现跑马灯效果完整代码(附效果图).zip

    在微信小程序中实现跑马灯效果,是一种常见的动态展示文本信息的方式,通常用于滚动显示公告、广告等。跑马灯效果使得文字或图片能够在有限的空间内循环滚动,从而吸引用户的注意力。本文将深入探讨如何使用微信小...

    带有跑马灯的RecycleView

    在Android开发中,"带有跑马灯的RecycleView"是一种常见的UI设计,它结合了RecycleView的高效复用机制和跑马灯效果,用于显示连续滚动的通知或广告等信息,同时支持用户点击进入详情页面。RecycleView是Android官方...

    javascript实现网页状态栏跑马灯效果特效

    javascript实现网页状态栏跑马灯效果特效,一个小的积累,不错

    Android-支持跑马灯效果并且与ViewPager同时使用时不会影响ViewPager的左右滑动手势

    4. 适配ViewPager:可能需要自定义一个PagerAdapter或者使用已有的适配器,确保在页面切换时,跑马灯效果能正确处理。 5. 测试和优化:对不同设备和Android版本进行测试,确保在各种情况下跑马灯效果都能正常工作,...

    Android ImageView图片循环跑马灯效果源码-IT计算机-毕业设计.zip

    7. **事件监听**:在跑马灯效果中,可能需要监听用户的滑动操作,以便在用户手动滑动时暂停自动滚动,并在滑动结束时恢复。 8. **数据结构和数据绑定**:源码可能使用了ArrayList或其他数据结构存储图片资源,同时...

    安卓跑马灯相关-跑马灯效果.rar

    7. **事件监听与交互**:在跑马灯效果中,可能需要监听用户交互,比如暂停、恢复或改变滚动速度。这需要实现OnClickListener或OnTouchListener,并在相应的方法中处理这些行为。 8. **性能优化**:考虑到跑马灯可能...

    跑马灯效果

    在跑马灯效果中,JavaScript将负责处理动画逻辑,包括元素的移动、计时器的设置以及停止条件的判断。 实现跑马灯效果通常涉及以下几个关键步骤: 1. **HTML结构**:在页面中创建一个包含滚动内容的容器,例如使用`...

    vue实现简单跑马灯效果.docx

    在本文中,我们将介绍如何使用 Vue 实现简单的跑马灯效果。 知识点1:Vue 实现跑马灯效果 要实现跑马灯效果,我们需要使用 Vue 的模板语法和 JavaScript 代码。首先,我们需要在 HTML 文件中添加一个容器元素,...

    网页跑马灯效果将后缀改为Html即可

    在给定的代码片段中,主要的跑马灯效果是通过以下JavaScript代码实现的: ```javascript &lt;!-- function statusMessageObject(p, d) { this.msg = MESSAGE; this.out = ""; this.pos = POSITION; this.delay =...

Global site tag (gtag.js) - Google Analytics