<!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. C# 银行系统

    今天分享一个大家都爱的Money 银行系统代码  可以随心所欲的存钱取钱 //要想成功,必须马到 //建立数组 Card[] cards = ]; //卡类初始化 public void Initia ...

  2. java IO其他流

    1.内存操作流,ByteArrayInputStream和 ByteArrayOutputStream 案例:将小写转化为大写 /* * 内存操作流,将大写字母转化为小写字母(ByteArrayInp ...

  3. struts2使用验证文件实现校验

    原创 struts2框架提供了一种基于验证文件的输入验证方式,将验证规则保存在特定的验证文件中. 验证文件的命名规则 一般情况下,验证文件的命名规则是:Action类名-validation.xml. ...

  4. GCT感受

    GCT考试已经结束了,但是复习GCT的时候一直没来得及总结点什么,GCT考的比较基础,所以复习起来并不是特别费力,但是还是有一些东西值得我们去学习的. 对于GCT考试,一开始在报名的时候其实心里是挺抵 ...

  5. Strict Weak Ordering

    Description A Strict Weak Ordering is a Binary Predicate that compares two objects, returning true i ...

  6. centos安装mysql，tomcat

    软件下载: jre和jdk下载:http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javas ...

  7. 如何轻松学习C语言编程！

    C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...

  8. django 快捷代码提示

    1.右键项目,Mark Directory As Source Root 2.settings配置 3.import包时可忽略app名了

  9. .net core i上 K8S(二)运行简单.netcore程序

    上一章我们搭建了k8s集群,这一章我们开始在k8s集群上运行.netcore程序 1.kubectl run 在我的Docker系列教程里,我曾往docker hub中推送过一个镜像“webdokce ...

  10. [ZJOI2008] 树的统计Count

    题目链接:戳我 树链剖分. 注意一点就是维护最大值的时候最好写成下面代码里那个样子,要不然会因为可能左右区间没有的问题有奇奇怪怪的锅. 代码如下: #include<iostream> # ...