实现文字跑马灯效果，主要控制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. java学习之路（1）

    java中的main()方法: 一.java主类中的主方法形式: public static void main(String[] args){ //TODO } 二.个部分解释: (1).publi ...

  2. python中heapq对dict进行排序

    问题: 想从以下形式的dict中取value最大的2个key-value的key dict_num_num = {0: 0.07374631268436578, 1: 0.16307692307692 ...

  3. DBMS_STATS.GATHER_SCHEME_STATS学习

    由于Oracle的优化器是CBO,所以对象的统计数据对执行计划的生成至关重要! 作用:DBMS_STATS.GATHER_TABLE_STATS统计表,列,索引的统计信息(默认参数下是对表进行直方图信 ...

  4. JVM的线程

    我们使用java命令来运行一个程序,那么就需要启动JVM , 而jvm的启动就相当于启动了一个进程 , 而这个进程在启动的时候会自动启动一个线程,由这个线程去调用main方法,而这个线程就是主线程 ; ...

  5. python定义接口继承类invalid syntax解决办法

    class s_all(metaclass=abc.ABCMeta): #python2.7用此方法定义接口继承 # __metaclass__ = abc.ABCMeta @abc.abstract ...

  6. Qt自定义类添加qvector报错

    PtsData& PtsData::operator=(const PtsData& obj){ return *this;} PtsData::~PtsData(){ }

  7. iptables之精髓（一）

    防火墙相关概念 从逻辑上讲.防火墙可以大体分为主机防火墙和网络防火墙. 主机防火墙:针对于单个主机进行防护. 网络防火墙:往往处于网络入口或边缘,针对于网络入口进行防护,服务于防火墙背后的本地局域网. ...

  8. Vue打包文件放在服务器后，浏览器存在缓存问题

    每次打包更新版本发到服务器上,导致偶尔会出现不能即使更新最新代码,浏览器存在缓存的问题. 解决方法:找到webpack .prod.conf.js 1.定义版本变量: const  Version = ...

  9. 图解 HTTP 笔记（三）—— HTTP 报文内的 HTTP 信息

    本章主要讲解请求和响应是如何运作的 一.HTTP 报文 用于 HTTP 协议交互的信息被称为 HTTP 报文,客户端的 HTTP 报文叫做请求报文,服务器端的叫做响应报文. HTTP 报文大致可分为报 ...

  10. java nio 缓冲区读写数据（图形详解）

    Position 您可以回想一下,缓冲区实际上就是美化了的数组.在从通道读取时,您将所读取的数据放到底层的数组中. position 变量跟踪已经写了多少数据.更准确地说,它指定了下一个字节将放到数组 ...