实现文字跑马灯效果，主要控制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. vue props传值后watch事件未触发的问题

    父组件传值,子组件监听,明明很简单的一个事情,硬是卡了许久(毕竟不是专业搞前端的,还是吃亏在学识浅陋).也和自己钻牛角尖有关,想自己解决问题. 早期我写过一篇vue组件传值的文章,传值方式是这样的: ...

  2. Jmeter Web 性能测试入门 (六)：Jmeter 解析 response 并传递 value

    解析response中的内容,并把获取到的value传递到后续的request中,常用的方法就是在想要解析response的request上添加后置处理器 本章介绍两种常用的组件 BeanShell ...

  3. React的Virtual DOM厉害了

    React 的伟大之处就在于,提出了Virtual DOM这种新颖的思路,并且这种思路衍生出了React Native,有可能会统一Web/Native开发. 在性能方面,由于用到了Virtual D ...

  4. 【Linux】安装 PostgreSQL

    参考: CSDN1:https://blog.csdn.net/ctwy291314/article/details/79900074 1.进入 PostgreSQL 官网的下载地址, 2.选择下面的 ...

  5. 黑马vue---28、vue中全局过滤器的基本使用

    黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...

  6. 设计一个支持 push，pop，top 操作，并能在常数时间内检索到最小元素的栈 绝对值？相对值

    小结: 1. 常数时间内检索到最小元素 2.存储 存储绝对值?相对值 存储差异 3. java-ide-debug 最小栈 - 力扣(LeetCode)https://leetcode-cn.com/ ...

  7. OS X的CAOpenGLLayer中如何启用OpenGL3.2 core profile

    在OS X的openGL编程中,我们有时为了想在自己的OpenGL图层上再加些自己的某些涂层,必须得用CAOpenGLLayer而不是NSOpenGLView,由于在NSOpenGLView上添加任何 ...

  8. .md 即 markdown 文件的基本常用编写语法

    0. 前言 Markdown 是一种纯文本格式的标记语言.通过简单的标记语法,它可以使普通文本内容具有一定的格式.现在的项目都使用了 git 仓库,再加上远程仓库 github 托管,那就难免要写一些 ...

  9. [Scikit-learn] Yield miniBatch for online learning.

    From: Out-of-core classification of text documents Code:  """ ======================= ...

  10. Win10安装多个MySQL实例

    Win10安装MySQL-8.0.15 1.下载mysql-8.0.15-winx64.zip安装包,地址如下 https://cdn.mysql.com//Downloads/MySQL-8.0/m ...