`

单排文字滚动向上间隔滚动

阅读更多

qongqi在制作网页的时候,很多情况下会遇到需要某一个文字或者图片像广告那样水平或者垂直的滚动,除了js外最近又get到一个新技能---容器标签<marquee>,这里分开介绍下:

 

(一)容器标签:主要讲解下容器标签<marquee>

这是一种相对简单方便的实现方案,经过测试兼容IE9,chrome,opera浏览器

语法:

 

<marquee></marquee>

 以下是一个最简单的例子:

 

<marquee><font size=+3 color=red>Hello, World</font></marquee>

 

marquee标签还可以实现图片从右往左移动(循环往复),例子:

<marquee><img src="http://web.tanzhouedu.com/index/images/google2_ewm.png"></marquee>

 

下面这两个事件经常用到:

onMouseOut="this.start()" :用来设置鼠标移出该区域时继续滚动

onMouseOver="this.stop()":用来设置鼠标移入该区域时停止滚动

例子:

<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up"
 height="300"width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" 
scrolldelay="100"onMouseOut="this.start()" onMouseOver="this.stop()">这是一个完整的例子
</marquee>

 

 

该标签支持的属性多达11个:

【1】align:设定<marquee>标签内容的对齐方式

absbottom:绝对底部对齐(与g、p等字母的最下端对齐)

absmiddle:绝对中央对齐

baseline:底线对齐

bottom:底部对齐(默认)

left:左对齐

middle:中间对齐

right:右对齐

texttop:顶线对齐

top:顶部对齐

 

【2】behavior:设定滚动的方式:

alternate: 表示在两端之间来回滚动。

scroll: 表示由一端滚动到另一端,会重复。

slide:  表示由一端滚动到另一端,不会重复。

<marquee behavior="alternate">alternate:表示在两端之间来回滚动。 </marquee>
<marquee behavior="scroll">scroll:表示由一端滚动到另一端,会重复。</marquee>
<marquee behavior="slide">slide:  表示由一端滚动到另一端,不会重复。</marquee>

 

【3】bgcolor:设定活动字幕的背景颜色,背景颜色可用RGB、16进制值的格式或颜色名称来设定

<marquee bgcolor="#006699">设定活动字幕的背景颜色 bgcolor="#006699"</marquee>
<marquee bgcolor="RGB(10%,50%,100%,)">设定活动字幕的背景颜色 bgcolor="rgb(10%,50%,100%,)"</marquee>
<marquee bgcolor="red">设定活动字幕的背景颜色 bgcolor="red"</marquee>

 

【4】direction:设定活动字幕的滚动方向

<marquee direction="down">设定活动字幕的滚动方向direction="down":向下</marquee>
<marquee direction="left">设定活动字幕的滚动方向direction="left":向左</marquee>
<marquee direction="right">设定活动字幕的滚动方向direction="right":向右</marquee>
<marquee direction="up">设定活动字幕的滚动方向direction="up":向上</marquee>

 

【5】height:设定活动字幕的高度

<marquee height="500" direction="down" bgcolor="#CCCCCC">
设定活动字幕的高度height="500"</marquee>

 

【6】width:设定活动字幕的宽度

<marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度width="500"</marquee>

 

【7】hspace:设定活动字幕里所在的位置距离父容器水平边框的距离

<table width="500" border="1" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td>
    </tr>
  </table>

 

【8】vspace:设定活动字幕里所在的位置距离父容器垂直边框的距离

<marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>

 

【9】loop:设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1

<marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee>
<p>&nbsp;</p>
<marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>

 

【10】scrollamount:设定活动字幕的滚动速度,单位pixels

<marquee scrollamount="10" >scrollamount="10" </marquee>
<marquee scrollamount="20" >scrollamount="20" </marquee>
<marquee scrollamount="30" >scrollamount="30" </marquee>

 

【11】scrolldelay:设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒),值大了会有一步一停顿的效果

<marquee scrolldelay="10" >scrolldelay="10" </marquee>
<marquee scrolldelay="100" > scrolldelay="100"</marquee>
<marquee scrolldelay="1000">scrolldelay="1000" </marquee>

 

 

 

 

(二)JS实现

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>js文字滚动制作js scroll单排文字滚动向上间隔滚动</title>
    <meta name="description" content="js文字特效制作一个js文字滚动效果控制单排向上间隔滚动 scroll 文字滚动,内含js代码下载。">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a, img {
            border: 0;
        }

        #scrollWrap {
            width: 300px;
            height: 18px;
            overflow: hidden;
            background: #E6F6F6;
        }

        #scrollMsg li {
            height: 18px;
            line-height: 18px;
            overflow: hidden;
            font-size: 12px;
            padding: 0 10px;
        }
    </style>
</head>

<body>

<div id="scrollWrap">
    <ul id="scrollMsg">
        <li><a href="http://www.17sucai.com/">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
        <li><a href="http://www.17sucai.com/">javascript滚动图片带按钮控制上下左右自动无缝滚动</a></li>
        <li><a href="http://www.17sucai.com/">javascript滚动图片按钮控制图片左右自动滚动</a></li>
        <li><a href="http://www.17sucai.com/">js选项卡类似js导航菜单的js tab选项卡切换效果</a></li>
    </ul>
</div>

<script type="text/javascript">
    try {
        var isStoped = false;
        var oScroll = document.getElementById("scrollWrap");
        with (oScroll) {
            noWrap = true;
        }

        oScroll.onmouseover = new Function('isStoped = true');
        oScroll.onmouseout = new Function('isStoped = false');

        var preTop = 0;
        var curTop = 0;
        var stopTime = 0;
        var oScrollMsg = document.getElementById("scrollMsg");

        oScroll.appendChild(oScrollMsg.cloneNode(true));
        init_srolltext();

    } catch (e) {
    }

    function init_srolltext() {
        oScroll.scrollTop = 0;
        setInterval('scrollUp()', 15);
    }

    function scrollUp() {
        if (isStoped)
            return;
        curTop += 1;
        if (curTop == 19) {
            stopTime += 1;
            curTop -= 1;
            if (stopTime == 180) {
                curTop = 0;
                stopTime = 0;
            }
        } else {
            preTop = oScroll.scrollTop;
            oScroll.scrollTop += 1;
            if (preTop == oScroll.scrollTop) {
                oScroll.scrollTop = 0;
                oScroll.scrollTop += 1;
            }
        }
    }
</script>
</body>
</html>

 

 

 

 

 

 

.

 

 

 

.

分享到:
评论

相关推荐

    js文字滚动制作js scroll单排文字滚动向上间歇滚动

    在这个场景中,"js文字滚动制作js scroll单排文字滚动向上间歇滚动"涉及到的是使用JavaScript实现一种常见的网页特效——文字滚动。 文字滚动是一种常见的网页动态效果,它可以使页面上的文本按照设定的方向(如...

    单排文字滚动向上.zip

    标题中的“单排文字滚动向上.zip”提示我们这是一个关于JavaScript实现的单行文字向上滚动的效果。在网页设计中,这种效果常用于展示通知、公告或者新闻更新,它可以使页面看起来更具动态感,同时节省空间。 描述中...

    单排文字滚动

    在网页设计中,"单排文字滚动"是一种常见的动态效果,用于展示有限空间内的大量文本。这种效果可以使一排文字在页面上从右向左或从左向右平滑滚动,创造出一种信息流动的视觉体验。它在新闻网站、公告栏或者任何需要...

    js文字滚动插件制作双行关联向上文字间隙滚动

    本文将深入探讨如何使用JavaScript(简称js)来创建一个双行关联的向上文字滚动效果,以及如何实现多组文字滚动列表。我们将通过分析标题、描述以及提供的资源文件名来讲解这一技术。 首先,我们要理解“js文字滚动...

    网页模板——vue.js实现的单排卡片滚动切换特效代码.zip

    在这个"网页模板——vue.js实现的单排卡片滚动切换特效代码"中,我们主要会探讨如何利用Vue.js来创建一个具有动态滚动效果的卡片布局。这种效果常见于许多网站,尤其是展示产品或服务的页面,它能够提供一种优雅的...

    jQuery带分页单排文字上下轮播滚动代码.zip

    实现效果: jQuery带分页单排文字上下轮播滚动代码,这样的效果我们可以应用到企业网站,或者商城网站,文字写成产品的信息,这样的一个效果,让网站也变的更加美观!

    vue.js单排卡片滚动切换代码.zip

    在“vue.js单排卡片滚动切换代码”这个项目中,我们看到的是一个基于Vue.js实现的UI组件,它设计了一个简洁的图片和文本卡片布局,适用于展示信息。这个组件特别适合于创建展示产品、新闻或任何其他信息的网站。 在...

    vue.js单排图文卡片滚动切换代码

    在这个"vue.js单排图文卡片滚动切换代码"项目中,我们将探讨如何利用Vue.js来实现一个具有动态滚动效果的图文卡片布局。 首先,`index.html`是项目的主入口文件,它包含了页面的基本结构和Vue实例的挂载点。在HTML...

    js实现单行文本向上滚动效果实例代码

    JS 实现单行文本向上滚动效果实例代码 这篇文章主要介绍了使用 JavaScript 实现单行文本向上滚动效果的实例代码。该代码提供了一个 ScrollText 对象,通过该对象可以实现文本的滚动效果。 ScrollText 对象 ...

    vue.js实现的单排卡片滚动切换特效代码.zip

    vue.js实现的单排卡片滚动切换特效代码.zip

    原创原生态纯js单排图片自动滚动效果代码

    【标题】中的“原创原生态纯js单排图片自动滚动效果代码”指的是一个使用JavaScript(简称js)编写的代码示例,它实现了图片在一行(单排)内自动平滑滚动的效果。这种效果常见于网站的轮播图或展示区域,能够吸引...

    js图片滚动插件支持单排图片上下滚动、图片无缝滚动

    本文将深入探讨这种支持单排图片上下滚动和无缝滚动的js图片滚动插件。 首先,单排图片上下滚动是指在网页的一行(或一列)内展示图片,并允许用户通过点击按钮或自动播放来上下滚动这些图片。这种方式使得有限的...

    jQuery上下间歇文字滚动.zip

    "jQuery上下间歇文字滚动"就是这样一款优秀的JavaScript特效,它为单排文字提供了一个圆滑、流畅的上下滚动展示方式,无需预先设定容器的高度,极大地提高了灵活性和适用性。下面我们将深入探讨这个特效的实现原理、...

    jQuery单排卡片左右滚动代码.zip

    这个"jQuery单排卡片左右滚动代码"就是一个很好的例子,它利用JavaScript库jQuery实现了一种卡片式布局的左右滚动效果。这种效果常见于产品展示、新闻列表或者团队成员介绍等场景,能够使用户在有限的屏幕空间内浏览...

    jquery图片放大滚动

    **jQuery图片放大滚动技术详解** 在网页设计中,图片展示是不可或缺的一部分,尤其在电商、产品展示等场景中,图片的交互性对于用户体验至关重要。"jQuery图片放大滚动"是一种常用的增强用户互动性的技术,它结合了...

    jQuery图片滚动自适应浏览器

    【jQuery图片滚动自适应浏览器】是一种网页设计技术,利用JavaScript库jQuery实现图片在不同分辨率的浏览器窗口中自动调整尺寸并流畅滚动。这种技术通常应用于全屏或焦点图展示,为用户提供一个美观且交互性强的浏览...

    vue.js单排卡片滚动切换代码

    // 当卡片被选中时,让它向上移动,模拟滚动效果 } ``` 最后,别忘了在Vue实例的`mounted`钩子中设置初始状态,确保卡片布局正确,并且第一个卡片默认显示。 这个例子中的标签"滚动切换"、"卡片滚动"和"单排图片...

Global site tag (gtag.js) - Google Analytics