<!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. Eclipse设置代码模板Code Template

    团队协作最好是使用相同的代码模板 Code Template,打开 Window -> Preference -> Java -> Code Style -> Code Tem ...

  2. 判断当前用户是否在某个SharePoint组内

    /// <summary> /// 判断当前登录人是否在sharepoint组中 /// </summary> /// <param name="current ...

  3. 02.Spring Ioc 容器 - 创建

    基本概念 Spring IoC 容器负责 Bean 创建.以及其生命周期的管理等.想要使用 IoC容器的前提是创建该容器. 创建 Spring IoC 容器大致有两种: 在应用程序中创建. 在 WEB ...

  4. 019 Remove Nth Node From End of List 删除链表的倒数第N个节点

    给定一个链表,删除链表的倒数第 n 个节点并返回头结点.例如,给定一个链表: 1->2->3->4->5, 并且 n = 2.当删除了倒数第二个节点后链表变成了 1->2 ...

  5. Vue.extend动态注册子组件

    写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) ...

  6. Python3基础（1）Python介绍、Python2 与Python3、变量、用户输入、if...else和for循环、while循环、break与continue

    ---------------个人学习笔记--------------- ----------------本文作者吴疆-------------- ------点击此处链接至博客园原文------ P ...

  7. 汇编debug

    R:查看.改变CPU寄存器的内容 D:查看内存中的内容 E:改写内存中的内容 U:将内存中的机器指令翻译成汇编指令 T:执行一条机器指令 A:以汇编指令的格式在内存中写入一条机器指令 第一步:先是[开 ...

  8. Unity C# 运用 GetSaveFileName() 导出Excel文件

    本文原创,转载请注明出处:http://www.cnblogs.com/AdvancePikachu/p/6944870.html 唉哟,这次厉害咯,网上搜罗了好久,终于被我找到汉化的保存对话框了,根 ...

  9. spring transaction 初识

    spring 事务初识 1.spring事务的主要接口,首先盗图一张,展示出spring 事务的相关接口.Spring并不直接管理事务,而是提供了多种事务管理器,他们将事务管理的职责委托给Hibern ...

  10. 韦东山笔记之用busybox构建根文件系统

    1 百度搜索busybox进入busybox官网(https://busybox.net/)作者:恒久力行 QQ:624668529  点击左侧DownloadSource下载最新稳定版的busybo ...