<!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. python切片、列表解析、元组

    1.列表解析 test = [x**2 for x in range(1,11)] 2.切片 test1 = ["a","b","c",&q ...

  2. 20169205实验二 Java面向对象程序设计

    20169205实验二 Java面向对象程序设计 实验内容及步骤 (一)单元测试 1.三种代码 伪代码:以简洁的自然语言表明设计步骤: 产品代码:用以实现特定功能的程序或机器语言: 测试代码:用以对产 ...

  3. [Selenium With C#基础教程] Lesson-06 单选按钮

    作者:Surpassme 来源:http://www.jianshu.com/p/08ee1929875f 声明:本文为原创文章,如需转载请在文章页面明显位置给出原文链接,谢谢. 单选按钮通常用在需要 ...

  4. 求帮忙解决封装jquery图片滚动问题

    今天用jquery封装了点击图片滚动,但是发现在屏幕自适应时,图片停在的位置会随着屏幕大小而错位(我引入了pocketgrid.css响应式文件,但没办法去那边修改onsize事件...),求大神.. ...

  5. IO--性能计数器

    --===================================================================== --在分析磁盘队列时,应参考数据库的其他计数器,如Che ...

  6. 数独高阶技巧入门之七——AIC & Nice Loop

    AIC(交替推理链,Alternate Inference Chain) 在简单异数链一文中我们介绍过XY-Chain技法,AIC可以看作是XY-Chain的扩展.有别于XY-Chain仅局限于双值格 ...

  7. CancellationTokenSource 取消任务

    using System; using System.Threading; using System.Threading.Tasks; namespace ConsoleApp1 { class Pr ...

  8. springboot pom 详解

    Starter POMs是可以包含到应用中的一个方便的依赖关系描述符集合.可以获取所有spring及相关技术的一站式服务,不需要翻阅示例代码,拷贝粘贴大量的依赖描述符. Starter名字的含义: 所 ...

  9. solidity 合约间调用以及参数传递

    在 以太坊中合约间是可以相互调用,并且正常进行参数传递以及返回值处理. contract1.sol pragma solidity ^0.4.0; contract Test1 { uint256 p ...

  10. 深入了解java虚拟机（JVM） 第四章 对象的创建

    一.对象的创建过程 对象的创建过程大致可以分为六步,其中对象的分配尤为重要: 二.对象分配内存 一般来说对象分配内存有两种方式: 第一种是指针碰撞,这是一种比较理想的方式:如果Java堆是绝对规整的: ...