实现文字跑马灯效果，主要控制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. combobox的js添加数据

    $("#int_cls").combobox({ valueField:'code', textField:'name', disabled:false }); var data, ...

  2. SOA（面向服务的架构）初识

    SOA是一种设计方法,其中包含多个服务,而服务之间通过配合最终会提供一系列功能.一个服务通常以独立的方式存在于操作系统中.服务之间通过网络调用(常见有http+xml.http+json等),而非进程 ...

  3. 第11组 Beta冲刺（3/5）

    第11组 Beta冲刺(3/5)   队名 不知道叫什么团队 组长博客 https://www.cnblogs.com/xxylac/p/12006665.html 作业博客 https://edu. ...

  4. 属性 每秒10万吞吐 并发 架构 设计 58最核心的帖子中心服务IMC 类目服务 入口层是Java研发的，聚合层与检索层都是C语言研发的 电商系统里的SKU扩展服务

    小结: 1. 海量异构数据的存储问题 如何将不同品类,异构的数据统一存储起来呢? (1)全品类通用属性统一存储: (2)单品类特有属性,品类类型与通用属性json来进行存储: 2. 入口层是Java研 ...

  5. embeddable persistent key-value store for fast storage

    A persistent key-value store for fast storage environmentsRocksDB is an embeddable persistent key-va ...

  6. linux系统下的rz、sz详解

    对于linux服务器来说,通常我们是通过一些ssh工具进行远程访问连接的,而对于经常使用它的人来说,少不了将文件上传下载到服务器.如何能够快速的同服务器进行文件的交互尤为重要.不然每次都打开单独的ss ...

  7. ansible实践

    ansible常用module ansible-doc -l List available modules -s Show playbook snippet for specified module( ...

  8. Vue 组件基础完整示例2

    简介此页面可以直接复制运行,包含以下应用: Vue slot插槽使用Vue v-model使用Vue props使用父子组件数据传递element-ui使用HTML方式注册子组件,可以将子组件数据写在 ...

  9. 获取Xshell Xftp等官网下载地址

    1. 首先还是得填写邮箱获取试用链接地址,例如我这次获取的是: https://cdn.netsarang.net/c5711331/Xshell-6.0.0175.exe 关键需要记下 c57113 ...

  10. AWS EC2避免误删软件包和数据的方法：取消“终止删除”默认配置

    本文介绍AWS在终止实例的时候如何保留根卷,避免误删软件包和数据. 作者:光环云 尹晓征 在aws控制台创建EC2的时候,我们在添加存储步骤中,如果使用默认配置的情况下,“终止时删除”配置默认是被选中 ...