<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JS使滚动操作</title>

</head>

<body>

    <div id="i1">做任何毫不费力的事情,都是在浪费时间</div>

    <script>

        function func(){

            // 根据ID获取指定标签的内容,定于局部变量接受

            var tag = document.getElementById('i1');

            // 获取标签内部的内容

            var content = tag.innerText;

            var f = content.charAt(0);

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

            var new_content = l + f;

            tag.innerText = new_content;

        }

        setInterval('func()', 500);

    </script>

</body>

</html>

JS及Dom练习 | 页面滚动文字的更多相关文章

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

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

  2. Headroom.js – 快速响应用户的页面滚动操作

    Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...

  3. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  4. js开启和关闭页面滚动【亲测有效】

    在移动端的页面开发过程中,经常会遇到点击弹框禁止页面滚动的情景,下面就来说下具体的做法... 第一步:构建一个函数 function bodyScroll(event){ event.preventD ...

  5. 原生js判断手机端页面滚动停止

    var topValue = 0,// 上次滚动条到顶部的距离 interval = null;// 定时器 contactsList = document.getElementById(" ...

  6. js 鼠标点击页面出现文字

    <script type="text/javascript"> var a_idx = 0; jQuery(document).ready(function($) { ...

  7. react 监听页面滚动

    html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScroll ...

  8. ScrollReveal-元素随页面滚动产生动画的js插件

    简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 scro ...

  9. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

随机推荐

  1. firefox ubuntu 中文包

    sudo apt-get install firefox-locale-zh-hans

  2. C# 时间戳的生成

    /**        * 生成时间戳,标准北京时间,时区为东八区,自1970年1月1日 0点0分0秒以来的秒数         * @return 时间戳        */        publi ...

  3. 编写高质量代码改善C#程序的157个建议——建议81：使用Parallel简化同步状态下Task的使用

    建议81:使用Parallel简化同步状态下Task的使用 在命名空间System.Threading.Tasks中,有一个静态类Parallel简化了在同步状态下的Task的操作.Parallel主 ...

  4. 深入理解java虚拟机（四）垃圾收集算法及HotSpot实现

    垃圾收集算法 一般来说,垃圾收集算法分为四类: 标记-清除算法 最基础的算法便是标记-清除算法(Mark-Sweep).算法分为“标记”和“清除”两个阶段:首先标记处需要收集的对象,在标记完成之后,再 ...

  5. 深入理解java虚拟机（七）类加载的时机

    Class 文件中描述的各种信息都必须加载到虚拟机中才能运行和使用.而虚拟机怎么加载这些Class 文件呢?Class 文件进入到虚拟机中会发生什么变化呢? 虚拟机类加载机制是指 虚拟机把描述类的数据 ...

  6. Python 数据分析—第七章 数据归整：清理、转换、合并、重塑

    一.数据库风格的Dataframe合并 import pandas as pd import numpy as np df1 = pd.DataFrame({'1key':['b','b','a',' ...

  7. python变量和简单的数据类型

    1.运行hello_world.py时发生的情况 运行hello_world.py时,Python都做了些什么呢?实际上,即便是运行简单的程序,Python所做的工作也相当多: #!/usr/bin/ ...

  8. 网易严选的wkwebview测试之路

    本文来自网易云社区 作者:孙娇 UIWebView是苹果继承于UIView封装的一个加载web内容的类,它可以加载任何远端的web数据展示在你的页面上,你可以像浏览器一样前进后退刷新等操作.不过苹果在 ...

  9. 《Beginning Java 7》 - 1 - Initializer 初始化器

    Initializer 分两类:class initializer 类初始化器   instance initializer 实例初始化器 1. class initializer,在编译时运行,通过 ...

  10. react学习之路-配制antd-mobile

    经过将近三个月的使用,现在终于在我老大的带领下做完了一个react的项目,感觉还可以,最大的不足就是,对于react中的很多的东西都是掺杂着jq使用来做的,这是最不满意的一点吧,但是开发进度很近,只能 ...