实现文字跑马灯效果，主要控制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. suduku

    github地址 PSP: PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟) Planning 计划 30 30 Estimate 估 ...

  2. 在使用vagrant访问PHP文件是报错“file not found”,好像是最新的NGINX不能识别document_root，只能改为自己的项目目录/vagrant_data

    出现该错误有很多可能,有可能是root配置不对,有可能是fastcgi_param SCRIPT_FILENAME参数不对等. 而本人遇到的也是参数不对,但是是一个比较少人提及的问题,nginx版本不 ...

  3. IO调度 | Linux块设备中的IO路径及调度策略

    当文件系统通过submit_bio提交IO之后,请求就进入了通用块层.通用块层会对IO进行一些预处理的动作,其目的是为了保证请求能够更加合理的发送到底层的磁盘设备,尽量保证性能最佳.这里面比较重要的就 ...

  4. Visual Studio Code 上java开发环境搭建

    在把一些开源的SDK中java代码转成C#代码时经常需要写点java代码来实验下功能,装个Eclipse或IDEAs吧,好像也不太值当,所以用vs code搭个环境偶尔来实验下.以下: 1.下载并装好 ...

  5. 关于adb命令获取安卓手机uuid时，demon 显示启动成功，但又获取不到uuid的解决办法：现象如下所示

    * daemon not running. starting it now on port 5037 * *demon started successfully* *list of devices a ...

  6. MATLAB常用快捷键总结

    MATLAB 命令栏显示处理的常用命令 清屏:clc 紧凑显示格式:format compact 宽松显示格式:format loose 数据高精度显示:format longG 数据低精度显示:fo ...

  7. Python简单遍历字典及删除元素的方法

    Python简单遍历字典及删除元素的方法 这篇文章主要介绍了Python简单遍历字典及删除元素的方法,结合实例形式分析了Python遍历字典删除元素的操作方法与相关注意事项,需要的朋友可以参考下 具体 ...

  8. Dart Language samples

    Hello World Every app has a main() function. To display text on the console, you can use the top-lev ...

  9. Jmeter 逻辑控制器 之 While Controller

    一.认识 While Controller 如下图,创建一个While Controller (While 循环控制器) 设置界面如下: Condition (function or variable ...

  10. IDEA配置Hystrix过程中报错: java.lang.IllegalStateException: No instances available for user-service

    最近在练习微服务架构中, 使用IDEA配置完Hystrix, 添加熔断方法后, 在浏览器中访问未启动的( 含有熔断方法注解 )的路径时, 报出了 : 500: No instances availab ...