<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="i2">欢迎马老师到来，观察做出指导。</div>

<input id="i1" style="width: 80px;" value="欢迎马老师到来，观察做出指导。" >

<script type="application/javascript">

    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

        }

    }

</script>

<script>

    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;

    }

</script>

</body>

</html>

　　

js 实现滚动字幕的更多相关文章

  1. HTML滚动字幕代码参数详解及Js间隔滚动代码

    html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...

  2. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  3. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

  4. js左右滚动幻灯

    js左右滚动幻灯 点击下载

  5. UILabel滚动字幕的实现

    经常需要在应用中显示一段很长的文字,比如天气或者广告等,这时候使用滚动字幕的方式比较方便. 参考文献: [1] YouXianMing, 使用UILabel实现滚动字幕移动效果, 博客园 [2] ht ...

  6. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. C#-循环滚动字幕,timer,从左至右,从右至左,暂停---ShinePans

    Lable的Left属性是能够更改的,可是 Right属性不能够更改,所以我们能够利用 这个特点做自加 自减运算 using System; using System.Collections.Gene ...

  8. DS控件库 DSLed控件呈现滚动字幕效果

    滚动字幕效果在DSled上可以使用偏移来实现,代码如下 运行效果

  9. JS鼠标滚动插件scrollpath使用介绍

    JS鼠标滚动插件scrollpath:在这个插件中首先要引人的JS是jQuery,因为后面的JS都是基于它的.再者需要引入的是jquery.scrollpath.js.scrollpath.css还有 ...

随机推荐

  1. 前端笔记 （2.CSS）

    知识点借鉴于慕课网,菜鸟教程和w3shool CSS方面: CSS全称为“层叠样式表”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 使用CSS样式的一个好处是通过 ...

  2. Windows 下使用nginx命令启动

    http://wanganwu.blog.163.com/blog/static/7788722012322111417966/ Windows下Nginx的启动.停止等命令 在Windows下使用N ...

  3. Java IntelliJ IDEA 不能显示项目里的文件结构

    方法一: 关闭IDEA, 然后删除项目文件夹下的.idea文件夹 重新用IDEA工具打开项目 方法二: 菜单:File -> Invalidate Caches / Restart

  4. 本地ip变化，自定义IP地址

    1.打开网络和internet 设置 2.右键属性 3.修改

  5. JAVA代码时间SFTP文件的下载

    参考文章:http://blog.csdn.net/smallerpig/article/details/50976191 SFTP文件的下载与FTP文件的下载差别较大,需要下载jsch-0.1.54 ...

  6. freeSSHd (Auth fail)错误！以及Xmanager的(ssh服务器拒绝了密码，请再试一次)错误！

    参考文档:http://blog.csdn.net/zhangliang_571/article/details/45598939 (Auth fail) 以及(ssh服务器拒绝了密码,请再试一次)  ...

  7. iostat iotop 查看硬盘的读写、 free 查看内存的命令 、netstat 命令查看网络、tcpdump 命令

    iostat 命令 查看硬盘的使用情况: iostat iostat -x iotop 命令: 若没安装先安装: yum install iotop -y free 命令,用于查看内存的使用量: fr ...

  8. grep 的学习 正则

    grep 命令: grep  "name"   /path/file_name    从file_name文件中中查找 name 字符 grep  -c    "name ...

  9. Kafka设计解析：Kafka High Availability

    Kafka在0.8以前的版本中,并不提供High Availablity机制,一旦一个或多个Broker宕机,则宕机期间其上所有Partition都无法继续提供服务.若该Broker永远不能再恢复,亦 ...

  10. Tag文件的创建与应用

    Tag文件,几乎和JSP文件一模一样,可以被JSP页面动态加载调用.Tag文件有什么优势呢(既然和JSP几乎一模一样,那就得想想这个必然有不一样的地方,不然要它存在干嘛) 在设计Web应用时,可以通过 ...