实现文字跑马灯效果，主要控制scrollLeft.

效果图如下

代码如下

<html>

<head>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>

<script type="text/javascript">

var position=$("div").scrollLeft();

var t;

var flag=true;

$(document).ready(function(){

  $("button").click(function(){

      if(flag){

        position=0;

        fun();

        $(".btn1").text("重置跑马灯");

      }else{

        $(".btn1").text("开始跑马灯")

        clearTimeout(t);

        $("div").scrollLeft(0);

      }

      flag=!flag;

  });

});

function fun(){

    if(position>400){

        position=0;

    }

    $("div").scrollLeft(position++);

    t=setTimeout("fun()",30);

}

</script>

</head>

<body>

<div id="testDiv" style="width:300px;overflow:hidden;white-space:nowrap;position:relative;">

The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.

</div>

<button class="btn1">开始跑马灯</button>

</body>

</html>

js文字跑马灯的更多相关文章

  1. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  2. 用jQuery实现参数自定义的文字跑马灯效果

    一,明确需求 基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环. 原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置 ...

  3. 微信小程序实现文字跑马灯

    wxml: <view>1 显示完后再显示</view> <view class="example"> <view class=" ...

  4. js抽奖跑马灯程序

    js抽奖跑马灯程序 点击下载代码

  5. JavaScript实现文字跑马灯

    其实实现文字的跑马灯和实现图片轮播的原理是一样的. 下面是我自己实现的,文字的位置可以随便更改,效果不会变,文字的内容可以通过ajax获取,同时,可以直接用Jquery改写一下,很方便. <!D ...

  6. JS实现跑马灯效果(向左，向上)

    <html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...

  7. Android开发：文本控件详解——TextView（二）文字跑马灯效果实现

    一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...

  8. JavaScript小实例-文字跑马灯效果

    我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...

  9. Androidd Studio 之多行文字跑马灯特效

    •效果展示图 •参考资料 两种方法实现TextView跑马灯效果(字体横向滚动) •出现的问题 新建 Java 文件继承 TextView 时出现问题: •解决方法 不应该继承 $TextView$ ...

随机推荐

  1. Redis启动后基础只是讲解

    1.单进程 epoll是Linux内核为处理大批量文件描述符而作了改进的epoll,是Linux下多路复用IO接口select/poll的增强版本, 它能显著提高程序在大量并发连接中只有少量活跃的情况 ...

  2. puppeteer学习笔记合集

    官方英文版API入口(如果你英文好的话):https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md. 汉化版API入口(网上有 ...

  3. Python 上下文管理器模块--contextlib

    在 Python 处理文件的时候我们使用 with 关键词来进行文件的资源关闭,但是并不是只有文件操作才能使用 with 语句.今天就让我们一起学习 Python 中的上下文管理 contextlib ...

  4. 2018-2019-2 20165210《网络对抗技术》Exp7 网络欺诈防范

    2018-2019-2 20165210<网络对抗技术>Exp7 网络欺诈防范 一.实验目标:本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 二.实验内容: ...

  5. guava常用集合交集，差集，并集，补集操作

    <!-- https://mvnrepository.com/artifact/com.google.guava/guava --> <dependency> <grou ...

  6. WIN7+QT5.2.0 连接oracle11g问题及解决方法

    用下面的代码建立连接之后,出现了几个问题 //连接数据库 QSqlDatabase db = QSqlDatabase::addDatabase("QOCI"); /**连接Ora ...

  7. [Scikit-learn] 2.5 Dimensionality reduction - Probabilistic PCA & Factor Analysis

    2.5.4. Factor Analysis PPCA的基本性质以及人肉推导: 以上假设z是标准正态分布的情况.以下是对z的分布的扩展,为general normal distribution. Fr ...

  8. C语言包含头文件时用引号和尖括号的区别

    用尖括号 #include <>:    一般用于包含标准的库头文件,编译器会去系统配置的库环境变量和者用户配置的路径去搜索,而不会在项目的当前目录去查找 用双引号 #include &q ...

  9. VICA概述及架构设计

    VICA全称VAT Invoice Client Platform(增值税发票客户端平台),顾名思义就是公司增值税发票业务相关处理的客户端集成平台.在VICA出现之前,公司发票开具的技术主要是依赖于A ...

  10. App唤起微信小程序和回调

    在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转,非同一开放平台账号下的小程序需与移动应用(APP)成功关联后才支持跳转. 可在“管理中心-移动应用-应用详情-关联小程序信息”,为通过审核的 ...