精华内容
下载资源
问答
  • css+js滚动字幕

    2017-04-17 12:51:21
    html css+纯js实现无缝连接循环的滚动字幕,内有注释
  • JS滚动字幕

    2012-08-20 16:47:32
    web滚动字幕代码,不知道是否已经过时。测试成功。
  • js 实现滚动字幕

    2021-06-10 09:49:29
    Title欢迎马老师到来,观察做出指导。content = document.getElementById("i1").getAttribute("value")setInterval("gun()",1000)var i = 0function gun() {document.getElementById("i1").setAttribute("value",...
    Title
    欢迎马老师到来,观察做出指导。

    content = document.getElementById("i1").getAttribute("value")

    setInterval("gun()",1000)

    var i = 0

    function gun() {

    document.getElementById("i1").setAttribute("value",content.substring(i,i+6))

    i++

    if ( i == content.length - 6){

    i = 0

    }

    }

    setInterval("gun2()",500);

    function gun2() {

    var tag = document.getElementById(‘i2‘);

    var content = tag.innerText;

    f = content.charAt(0);

    l = content.substring(1,content.length);

    new_content = l + f;

    tag.innerText = new_content;

    }

    展开全文
  • js滚动字幕

    2012-02-29 16:04:05
    js制作滚动字幕,可以上下左右连续滚动
  • 原生js实现字幕滚动

    千次阅读 2018-11-20 17:05:19
    使用css和原生js实现的字幕滚动效果,无缝衔接 效果 原理 容器设置固定宽度,超出部分隐藏,滚动部分绝对定位并通过定时器改变位置 实现 html部分 <div class="scroll"> <span&...

    使用css和原生js实现的字幕滚动效果,无缝衔接

    效果

    在这里插入图片描述

    原理

    容器设置固定宽度,超出部分隐藏,滚动部分绝对定位并通过定时器改变位置

    实现

    • html部分
    <div class="scroll">
        <span>这里是要现实的滚动内容......</span>
     </div>
    
    • css部分
    .scroll {
      width: 400px;
      height: 23px;
      white-space: nowrap;
      overflow: hidden;
      margin-left: 40px;
      position: relative;
    }
    .scroll > span {
      position: absolute;
    }
    
    • js部分
    // 字幕滚动变量
    var scrollTime = null
    var LEN = 400 // 一个完整滚动条的长度
    var x = 0
    // 启动滚动定时器
    function roll () {
      console.log('启动')
      var tag1 = document.querySelector('.scroll>span')
      var tag2 = tag1.nextSibling
      var fun = function () {
        tag1.style.left = x + 'px'
        tag2.style.left = (x + LEN) + 'px'
        x = x - 5
        if ((x + LEN) === 0) {
          x = 0
        }
      }
      if (scrollTime) {
        clearInterval(scrollTime)
      }
      scrollTime = setInterval(fun, 300)
    }
    // 绑定鼠标事件
    function bindMouseEvent () {
      var el = document.querySelector('.scroll>span')
      var el2 = el.cloneNode(true)
      LEN = el.clientWidth + 100 // 动态修改滚动条的长度,避免文字过多重叠
      el2.style.left = (x + LEN) + 'px'
      el.parentElement.appendChild(el2)
      el.addEventListener('mouseenter', function (e) {
        clearInterval(scrollTime)
      })
      el.addEventListener('mouseleave', function (e) {
        roll()
      })
    }
    
    展开全文
  • 字幕滚动事件主要时在&lt;marquee&gt;标记中使用,该标记虽然不能实现多样化的字幕滚动效果,当应用起来十分简单,可以使用最少的语句来实现字幕滚动的效果。 onbounce事件 onbounce事件是在&lt;...

    字幕滚动事件主要时在<marquee>标记中使用,该标记虽然不能实现多样化的字幕滚动效果,当应用起来十分简单,可以使用最少的语句来实现字幕滚动的效果。

    onbounce事件

    onbounce事件是在<marquee>标记中的内容滚动到上下或左右边界时触发的事件处理程序,该事件只有在<marquee>标记的behavior属性设为alternate时才有效。
    例子:字幕滚动到窗口边界时速度逐渐加快(减慢)。

    将<marquee>标记的behavior属性设为altermate, direction 属性设置为up,使字幕可以在页面中上下循环滚动,并通过onbounce事件在字幕到达窗口边界时,修改scrollAmount属性值来改变字幕的滚动速度。

    
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript">
    			var i=1;
    			var t=true;
    			function pp(){  //逐渐增加或减少字幕的滚动速度
    				var e=window.event;
    				var obj=e.srcElement;
    				if(i==8)
    					t=false;
    				if(i==1)
    					t=true;
    				if(t==false)
    					i-=1;
    				else
    					i++;
    				obj.scrollAmount=i;
    			}
    		</script>
    	</head>
    	<body>
    		<marquee behavior="alternate" direction="up" scrollamount="1" onbounce="pp()">
    			中国物联网校企联盟将物联网定义为当下几乎所有技术与计算机、互联网技术的结合,实现物体与物体之间:环境以及状态信息实时的共享以及智能化的收集、传递、处理、执行。广义上说,当下涉及到信息技术的应用,都可以纳入物联网的范畴。
    		</marquee>
    	</body>
    </html>
    

    具体演示:略(自己动手来一遍)

     

    onstart事件

    onstart事件是在<marquee>标记中的文本开始显示时触发事件处理程序。可以通过该事件在滚动内容显示时,设置其颜色、样式、滚动方向。

    例子:动态设置滚动字幕的颜色和滚动方向。

    本实例是通过<marquee>标记的onstart事件,在滚动字幕显示时,动态设置滚动字幕的字体颜色和滚动方向。

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript">
    			var i=0;
    			var t=true;
    			var arrayobj=new Array("#00FF23","#00FFFF","#FF00000","FF00FF","0F0F0F");
    			function pp(){  //逐渐增加或减少字幕的滚动速度
    				var e=window.event;
    				var obj=e.srcElement;
    				obj.direction="up";
    				if(i>(arrayobj.length-1))
    					i=0;
    				obj.style.color=arrayobj[i];
    				i++;
    			}
    		</script>
    	</head>
    	<body>
    		<marquee behavior="alternate" direction="up" scrollamount="4" onbounce="pp()">
    			中国物联网校企联盟将物联网定义为当下几乎所有技术与计算机、互联网技术的结合,实现物体与物体之间:环境以及状态信息实时的共享以及智能化的收集、传递、处理、执行。广义上说,当下涉及到信息技术的应用,都可以纳入物联网的范畴。
    		</marquee>
    	</body>
    </html>
    

     

    展开全文
  • js 字幕滚动

    2017-10-26 14:42:48
    实现字幕功能效果 界面有条理 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
  • 为了滚动能够“连续”,我们需要将字幕的内容复制多遍,直到内容的高度不小于滚动区高度的两倍。然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动)。当滚动滚动到最下方时,理论上不能...

    我们一般都用Marquee标签控制元素的滚动。但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白。而下面介绍中的滚动则是连续的,毫不间断。

    下面为你介绍这是如何实现的。

    为了滚动能够“连续”,我们需要将字幕的内容复制多遍,直到内容的高度不小于滚动区高度的两倍。然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动)。当滚动条滚动到最下方时,理论上不能再往下滚动了,于是我们立刻调整滚动条,将它向上滚动到一个和当前画面一样的位置。结果我们看到的就是连续的滚动了。呵呵,说的就是这么简单,那做起来如何呢?我们看看是如何逐步实现的。

    <div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接一</a>

    <br> <a href="#">链接二</a>

    <br> <a href="#">链接三</a>

    <br> <a href="#">链接四</a>

    <br> <!-- 字幕内容结束 -->

    </div>

    <!-- 以下是java-script代码 -->

    <script language="java-script">

    <!--

    marqueesHeight=200; //内容区高度

    stopscroll=false; //这个变量控制是否停止滚动

    with(marquees){

    noWrap=true; //这句表内容区不自动换行

    style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大

    style.height=marqueesHeight;

    style.overflowY="hidden"; //滚动条不可见

    οnmοuseοver=new Function("stopscroll=true"); //鼠标经过,停止滚动

    οnmοuseοut=new Function("stopscroll=false"); //鼠标离开,开始滚动

    }

    //这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:

    document.write('<div id="templayer"

    style="position:absolute;z-index:1;visibility:hidden"></div>');

    function init(){ //初始化滚动内容

    //多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:

    while(templayer.offsetHeight<marqueesHeight){

    templayer.innerHTML+=marquees.innerHTML;

    } //把"templayer"的内容的“两倍”复制回原内容区:

    marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;

    //设置连续超时,调用"scrollUp()"函数驱动滚动条:

    setInterval("scrollUp()",10);

    }

    document.body.οnlοad=init;

    preTop=0; //这个变量用于判断滚动条是否已经到了尽头

    function scrollUp(){ //滚动条的驱动函数

    if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动

    preTop=marquees.scrollTop; //记录滚动前的滚动条位置

    marquees.scrollTop+=1; //滚动条向下移动一个像素

    //如果滚动条不动了,则向上滚动到和当前画面一样的位置

    //当然不仅如此,同样还要向下滚动一个像素(+1):

    if(preTop==marquees.scrollTop){

    marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;

    }

    }

    -->

    </script>

    这样就完成了,感觉做起来也不难吧。

    展开全文
  • 原生JS 实现字幕滚动

    2021-11-11 10:16:54
    原生JS 实现字幕滚动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...滚动字幕</title> <style> #marquee { color: red; display: block; width: 96%; h
  • 水平滚动字幕循环滚动
  • js实现字幕无缝滚动

    2018-05-11 17:01:00
    <script type="text/javascript" language="javascript"> //大层 var slideBox = document.getElementById("slideBox"); //内容层 var slideContent = document.getElementById("slideContent"); //拼接层 ...
  • 滚动字幕 自动滚动和滚动速度及设置鼠标悬停 添加内容 跑马灯时间 ready()方法
  • JavaScript代码如下: /* (1)网页加载完成,动画自动开始 (2)获取三个的对象 (3)将三个的高度设为一致 (4)将dome1的内容,复制到dome2中 (5)使用定时器:每隔40毫秒,动画向上滚动1个像素。 (6)判断是否...
  • 制作滚动字幕效果:marquee标签 如下:() onmouseover=stop() scrollAmount=4> 参数说明:direction滚动方向:up向上滚动,down向下滚动,left向左滚动,right向右滚动behavior滚动方式:scroll绕来绕去,slid...
  • vue 实现滚动字幕

    2021-07-08 09:58:24
    <div id="demo" ref="demo" class="out"> <div class="qimo"> <div id="demo1" ref="demo1"> <ul> <li v-for="(item, index) in list"> <a href="">.../u.
  • javascript代替marquee的滚动字幕效果代码
  • javascript实现代替marquee的滚动字幕效果代码
  • js文字一行左右滚动

    2018-04-27 11:46:59
    JS jquery 文字一行多余隐藏,然后左右滚动 JS jquery 文字一行多余隐藏,然后左右滚动
  • js文字横向滚动特效

    2021-06-10 02:50:59
    本文为大家分享了js文字横向滚动特效代码,具体实现内容如下:页面布局恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡奖励恭喜793765***获得 50元巨人点卡...
  • 浅析js 文字滚动效果

    2020-10-29 02:49:20
    滚动显示,是网页企业公告,文字链广告常用的一种效果,说不定在什么时候你就能看到它。
  • 但是我们很多时候会用到滚动字幕的样式,所以就采用了实时动态改变元素位置的方式来实现此功能,在实现的时候用过HTML DOM setInterval() 方法,但是会出现频闪的现象,初步估计是因为其他js的时间对其产生影响,...
  • 循环滚动字幕

    2021-06-07 04:27:22
    比如视频,音频,字幕。如果要用A视频的图像,B视频的音乐,生成C视频。原理就是提取出A视频的视频流数据,B视频的的音频流数据,写入C视频的视频流和音频流中。流程图如下#include 来自:博客自动查找章节标记,...
  • 滚动字幕在FrontPage的组件里有,但是FrontPage这个软件只能支持单行文字,一出现多行文字它就无能为力了,而且它只能支持一行滚动!(如果出现只能滚动一行的情况,解决办法是把这段代码嵌入到JavaScript的document....
  • css + js实现简单无缝滚动字幕

    千次阅读 2017-04-17 13:12:28
    css + js实现无缝滚动字幕 利用js和css就可以很方便的实现一个无缝滚动字幕,使得列表在一个方框里不停滚动 目录 [toc]实现思路 定义两个滚动块,内容一模一样,从下往上两个紧挨着滚动,当第一个滚动块滚动出...
  • html文字滚动代码滚动文字滚动文字滚动文字marquee 参数:BGColor:滚动文本框的背景颜色。Direction:滚动方向设置,可选择Left、Right、up和down。scrolldelay:每轮滚动之间的延迟时间,越大越慢。scrollamount:...
  • 这是一个动态JavaScript文字显示的例子var POSITION = 50;var DELAY = 150;var MESSAGE = "这是一个动态JavaScript文字显示的例子";function bannerObject(){this.msg = MESSAGE;this.out = " ";this.pos = POSITION...
  • 滚动字幕会让很多人感到兴奋,特别是第一次使用滚动字幕时,会爱不释手。现在做一个详细的方案,让你更全面地了解一下。滚动字幕在FrontPage的组件里有,但是FrontPage这个软件只能支 持单行文字,一出现多行文字它...
  • 本文实例讲述了JS实现简单的文字无缝上下滚动功能。分享给大家供大家参考,具体如下:文字列表无缝滚动代码*{margin:0px;padding:0px;border:0px;}body{font-size:12px}#demo{overflow:hidden;height:80px;width:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,677
精华内容 1,470
关键字:

js滚动字幕