<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="i1" style="width: 400px;

 height: 300px;

 position: absolute;

 left: 50%;

 top: 50%;

 margin-left: -200px;

 margin-top: -150px; ">欢迎任明霞莅临指导

 </div>

 <script>

     function f() {

         //根据id获取所对应的div,document意思是去整个html文档中找，getElementById是根据ID

         var tag = document.getElementById('i1')

         //拿到div中的文本，注意innertext方法没有括弧

         var content = tag.innerText

         //获取它这个字符串的第一个文字

         var z =content.charAt(0)

         //获取这个文本除第一个字以外的文本，用substring给它起始位置

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

         //把第一个字符放到最后一位拼接起来

         var new_content = l+z

         //用新生成new_content把div中的文本替换掉

         tag.innerText = new_content

     }

     //setInterval是个定时器，第一个参数是要执行的内容，第二个参数是执行间隔，单位为毫秒

     setInterval('f()',100)

 </script>

 </body>

 </html>

JavaScript设置div中的文字滚动起来 实现滚动效果的更多相关文章

  1. 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

  2. 设置div中的div居中显示

    设置div中的div居中显示 方法一. <div class='big'> <div class='small'>box1</div> </div> s ...

  3. div中单行文字垂直水平居中

    1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...

  4. 禁止鼠标多次点击选中div中的文字

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>Fire ...

  5. CSS之user-select——设置标签中的文字是否可被复制

    详细介绍请参考 http://www.css88.com/book/css/properties/user-interface/user-select.htm CSS样式 user-select:no ...

  6. div中让文字垂直居中

    在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...

  7. 如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  8. css之div中纯文字单行和多行垂直居中

    先上效果图 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  9. 设置div中文字超出时自动换行

    一.对于div强制换行1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准.#wrap{white-space:normal; wid ...

随机推荐

  1. BZOJ 2462 [BeiJing2011]矩阵模板 矩阵哈希

    昨天卡了一天常数...然后发现吧$unsigned\space long\space long$改成$unsigned$就可以过了$qwq$ 先把每一行的前缀哈希求出,然后再竖着把每个前缀哈希值哈希起 ...

  2. vue——运行一个项目

    教程:https://segmentfault.com/a/1190000009871504 启动:cnpm run dev

  3. rancher中级（一）（rancher的存储，网络）

    容器的存储机制 参考 http://dockone.io/article/128:http://dockone.io/article/129: Docker镜像是由多个文件系统(只读层)叠加而成.当我 ...

  4. jQuery对ajax的支持

    有load,get,post和ajax四个方法都可以,其中后三个直接使用$.xx调用 使用方法大致相同,这里只介绍get和post方法 -------------------------------- ...

  5. chroot 的应用

    http://www.williamlong.info/archives/3864.html http://my.oschina.net/u/1590519/blog/342576

  6. springBoot学习 错误记录

    1.下面结果 会出现500错误 原因:thymeleaf相关包版本不兼容导致 解决:之前配置的3.0.9对应2.1.1&2.2.2,3.0.6对应2.2.2&2.1.1都不可以,下面的 ...

  7. spring boot 监控与管理（actuator）

    Spring POMs 中提供了一个特殊的依赖模块,即spring-boot-starter-actuator,我们只需要在我们的POM中添加依赖即可 <!-- 监控 管理 --> < ...

  8. hibernate课程 初探单表映射1-1 第一章

    本章内容: 1 什么是orm 2 hibernate简介 3 编写第一个hibernate小例子

  9. FRM-92050错误

    使用IE8在打开EBS Form界面时,窗口提示信息“Internet Explorer 已对此页面进行了修改,以帮助阻止跨站脚本.单击此处,获取详细信息...”或者R12 IE8中出"FR ...

  10. 【extjs6学习笔记】0.3 准备： 类库结构2