`
java-admin
  • 浏览: 1384134 次
  • 性别: Icon_minigender_1
  • 来自: 陕西.西安
社区版块
存档分类
最新评论

Html文字滚动代码+JS跑马灯代码

阅读更多

http://www.jinghuazhe.com/post/100.html

 

1.建立第一个滚动字幕。代码:
<marquee scrollAmount=2 width=300>我喜欢网页设计</marquee>
效果如:

我喜欢网页设计

2.各参数详解:
a)
scrollAmount。它表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好。
b)width和height,表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。
c)
direction。表示滚动的方向,默认为从右向左:←←←。可选的值有right、down、up。滚动方向分别为:right表示→→→,up表示↑,down表示↓。
d)scrollDelay,这也是用来控制速度的,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。
e)behavior。用它来控制属性,默认为循环滚动,可选的值有alternate(交替滚动)、slide(幻灯片效果,指的是滚动一次,然后停止滚动)

3.实例:
a)
如何给滚动字幕加超链接? 这跟平时的超链接是完全一样的。只要在文字外面加上<a href=***>和</a>就可以了。如下效果,代码是<marquee scrollAmount=2 width=300><a href=http://www.cctv.com>中央电视台</a></marquee>,点击中央电视台就可以进入 了:

中央电视台

b)如何制作当鼠标停留在文字上,文字停止滚动
代码如:
<marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>文字内容</marquee>
效果如:

文字内容

c)交替效果。代码如:
<marquee scrollAmount=2 width=99
behavior=alternate>文字内容</marquee>
效果如:

文字内容

d)多行文本向上滚动。代码如:
<marquee scrollAmount=2 width=300 height=160 direction=up>·早晨好啊!<br>·空气好清新啊<br>·今天过得好吗?<p>·<a href=http://www.cctv.com>中央电视台</a></marquee>
效果如:

·早晨好啊!
·空气好清新啊
·今天过得好吗?

 

·中央电视台

·注意:如果你的网页经过了FrontPage编辑,保存之后,只能滚动一行,这时候你发现你原来的代码顺序已经变了,My god!解决的办法是,找出原来的代码,把它嵌入到javascript的document.write中即可,上述代码写为:
<script>document.write('<marquee scrollAmount=2 width=300 height=160 direction=up>·早晨好啊!<br>·空气好清新啊<br>·今天过得好吗??<p>·< a href=http://www.cctv.com>中央电视台</a></marquee>')< /script>

e)改变滚动字幕的颜色?可以用样式表来控制。如下效果,代码是 <marquee scrollAmount=2 width=300><a style=color:CC6600>我喜欢网页设计!</a></marquee>

 

<script></script>欢迎光临七色风网页家园--这里有从上千个网页特效中精选的300多个实用的特效,另外,为了网友更方便地学习,我们还改写和编写了部分的特效,并作了详细的说明和必要的使用提示!

欢迎光临七色风网页家园--这里有从上千个网页特效中精选的300多个实用的特效,另外,为了网友更方便地学习,我们还改写和编写了部分的特效,并作了详细的说明和必要的使用提
分享到:
评论

相关推荐

    可以调滚动文字速度的跑马灯源码

    跑马灯效果是一种常见的UI设计元素,常用于展示滚动信息,如新闻标题、广告或公告。在编程领域,实现跑马灯效果通常涉及到字符串的滚动显示,可以通过改变滚动速度来达到不同的视觉效果。本资源提供的是一款可以调整...

    【JavaScript源代码】Vue实现跑马灯样式文字横向滚动.docx

    在本文中,我们将探讨如何使用 Vue 来实现跑马灯样式文字的横向滚动效果。跑马灯通常用于显示滚动文本,如公告或广告,使得有限的空间内可以展示更多的内容。 首先,我们需要创建一个名为 `marquee` 的自定义组件。...

    跑马灯特效--文字滚动

    本文将深入探讨跑马灯特效在文字滚动中的实现原理和应用技巧。 一、实现原理 跑马灯特效主要通过编程语言如JavaScript、CSS以及HTML来实现。在HTML中,我们通常会创建一个包含滚动内容的容器元素,然后通过CSS设置...

    HTML跑马灯无缝滚动

    3. **JavaScript逻辑**:通过`&lt;script&gt;`标签内的代码,设置滚动速度、获取DOM元素引用、克隆内容、定义滚动函数和控制事件监听,实现了跑马灯的无缝滚动效果。 #### 四、应用场景 跑马灯无缝滚动适用于多种场景,...

    js跑马灯代码php

    综上所述,虽然“js跑马灯代码php”这个标题和描述看似将JavaScript和PHP关联在一起,但实际上给出的代码片段仅展示了如何用JavaScript实现跑马灯效果。然而,在实际的Web开发中,确实可以通过结合使用PHP和...

    html页面跑马灯js代码

    下面我们将详细讨论如何使用JavaScript来编写跑马灯代码。 1. **HTML结构**: 在HTML页面中,首先需要创建一个容器来放置跑马灯内容,通常是一个`div`元素。每个要展示的项目(如图片或文本)也需要放在独立的`div...

    jQuery无缝滚动跑马灯效果

    4. **jQuery代码实现**:编写JavaScript代码来控制跑马灯的滚动效果。这包括初始化位置、设置定时器进行滚动、处理过渡动画等。 ```javascript $(document).ready(function() { var slider = $('#slider'); var ...

    HTML5跑马灯抽奖代码.7z

    首先,"跑马灯"效果通常指的是文字或图片在页面上循环滚动,类似于马灯在夜晚的旋转,给人一种连续不断的感觉。在HTML5中,这种效果可以通过CSS3的动画或者JavaScript实现。在这个案例中,我们可能会看到JavaScript...

    图文滚动jQuery跑马灯代码.zip

    【标题】:“图文滚动jQuery跑马灯代码.zip”是一个包含jQuery跑马灯特效的压缩包,主要用于网页中的图文展示效果。 【描述】:这个代码利用了jquery.limarquee插件,该插件是一个轻量级的jQuery扩展,设计用于创建...

    JS横竖跑马灯

    在提供的文件`js防跑马灯滚动.htm`中,可能包含了实现这些功能的HTML结构和JavaScript代码。`images`文件夹可能包含用于跑马灯效果的图片资源。通过分析和理解这些代码,你可以进一步学习和掌握JS横竖跑马灯的实现...

    文字自动滚动效果_俗称:文字跑马灯效果

    2. **CSS**:CSS3引入了`transform`和`transition`属性,可以用来创建更复杂的动画效果,包括文字滚动。例如,使用`translateX`实现水平滚动: ```css .scrolling-text { width: 100%; white-space: nowrap; ...

    真正ASP+ACCESS+JS的动态无缝跑马灯可用代码与详细介绍

    这段JavaScript代码实现了跑马灯的核心功能:自动滚动。通过设置`speed`变量控制滚动速度,并使用`setInterval`函数每隔一定时间调用`Marquee`函数,从而实现连续滚动效果。同时,当鼠标悬停在跑马灯上时,通过`...

    HTML跑马灯

    HTML跑马灯是一种在网页上实现文字或图片滚动显示效果的技术。通过使用`&lt;marquee&gt;`标签及其属性,可以轻松创建出动态的跑马灯效果。跑马灯在早期网页设计中较为常见,用于吸引用户注意力或展示重要信息。 #### 二、...

    jQuery文字跑马灯插件Marquee

    2. **HTML结构**:在需要跑马灯效果的元素中,放置需要滚动的文字内容。 3. **初始化插件**:在`$(document).ready()`函数中,通过选择器找到目标元素,并调用`.marquee()`方法来初始化插件。 ```javascript $...

    HTML5文字跑马灯动画特效特效代码

    在本案例中,我们关注的是HTML5中的文字跑马灯动画特效,这是一种通过CSS3属性来实现的文字滚动效果,通常用于吸引用户的注意力或创建动态展示效果。这种效果可以应用于店铺标题、广告宣传等场景。 Splitting.js是...

    php 跑马灯程序

    PHP跑马灯程序是一种常见的网页动态效果,它通常用于滚动显示文字或图片信息,类似于传统的霓虹灯广告牌。在网页设计中,跑马灯可以吸引用户注意力,提高信息的可见性。在这个项目中,我们将深入探讨如何使用PHP实现...

    HTML动态立体跑马灯

    HTML动态立体跑马灯是一种常见的网页效果,常用于制作引人注目的滚动公告或广告栏。这个技术主要依赖于HTML和CSS,不涉及JavaScript,因此对于初学者来说,这是一个很好的学习项目,因为它可以帮助理解CSS的动态效果...

    JS标题栏跑马灯效果的实现

    在网页设计中,跑马灯(Marquee)效果是一种常见的动态展示方式,它可以滚动显示文字、图片或其他元素,为网页增加视觉吸引力。在本文中,我们将探讨如何使用JavaScript实现标题栏跑马灯效果。 首先,我们需要理解...

    跑马灯效果的多种实现

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

    jQuery 跑马灯效果

    **jQuery跑马灯效果**是一种常见的网页动态展示技术,它通过自动循环滚动或切换内容,如图片、文字或链接,来吸引用户注意力并提供信息。在网页设计中,这种效果通常用于广告展示、新闻滚动或者产品展示等场景。在本...

Global site tag (gtag.js) - Google Analytics