https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js

兼容vue

$("#demo4").marquee({
direction: "up",
duration: 2000, // 滚动速度 ,
pauseSpeed: 500, // 滚动完到下一条的间隔时间 ,
pauseOnHover: true, // 鼠标滑向文字时是否停止滚动 ,
loop: -1 , //设置循环滚动次数 (-1为无限循环)
});

默认配置:
 // Public: plugin defaults options
$.fn.marquee.defaults = {
// If you wish to always animate using jQuery
allowCss3Support: true,
// works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
css3easing: 'linear',
// requires jQuery easing plugin. Default is 'linear'
easing: 'linear',
// pause time before the next animation turn in milliseconds
delayBeforeStart: 1000,
// 'left', 'right', 'up' or 'down'
direction: 'left',
// true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: false,
// duration in milliseconds of the marquee in milliseconds
duration: 5000,
// gap in pixels between the tickers
gap: 20,
// on cycle pause the marquee
pauseOnCycle: false,
// on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
pauseOnHover: false,
// the marquee is visible initially positioned next to the border towards it will be moving
startVisible: false
};

vue文字跑马灯效果的更多相关文章

  1. vue实现跑马灯效果

    vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...

  2. Android开发:文本控件详解——TextView(二)文字跑马灯效果实现

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

  3. 黑马vue---10-11、Vue实现跑马灯效果

    黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件   v-on   @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...

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

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

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

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

  6. 使用Vue做出跑马灯效果

     <div id="pmd">         <h4> {{msg}}</h4>         <input type="b ...

  7. VUE之文字跑马灯效果

    VUE之文字跑马灯效果 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. [转]实现文字跑马灯效果,scrolling text from right to left

    <div> <marquee direction="left" behavior="scroll" scrollamount="10 ...

  9. 实现一个微信小程序组件:文字跑马灯效果

    marquee.json { "component": true, "usingComponents": {} } marquee.wxml <!--co ...

随机推荐

  1. Confluence 6 诊断

    当你对性能进行诊断或者希望知道是什么原因导致 Confluence 崩溃,你希望知道在 Confluence 内部是什么导致这些问题发生的.这个时候系统的诊断信息能够帮助你获得更多的有关的这些信息. ...

  2. vuecli3初尝试(转载)

    https://segmentfault.com/a/1190000016423943 在vue-cli3中安装element-ui 其中两种方式自己选择 格式化代码 使用yarn lint命令自动格 ...

  3. Android 基础 二 四大组件 Activity

    Activity Intent IntentFilter 一理论概述 一. Activity 用来提供一个能让用户操作并与之交互的界面. 1.1 启动 startActivity(Intent int ...

  4. Niagara物联网框架机制一(笔记)

    一.介绍: Niagara是Tridium公司研发的设计用于解决设备连接应的软件框架平台技术,应用框架是一个软件工程中的概念,不同于普通的软件,它是用于实现某应用领域通用完备功能的底层服务,使用这种框 ...

  5. java web----TCP/DUP 通信

    服务端和单客户端通信 注意事项:如果服务端或者客户端采用read() 一个字节这种读取数据,只要另一方没有关闭连接,read是永远读取不到-1,会陷入死循环中: 解决方法:加上一个判断,程序员自己跳出 ...

  6. 属性(property)的特性(attribute)

    属性:对象中可以保存数据的变量 属性的特性:     数据属性的特性(默认值是false):value.writable(可写否) .enumerable(可否枚举).configurable(可否重 ...

  7. Appium Demo

    import unittestimport timefrom appium import webdriverfrom public import configimport os #类继承unittes ...

  8. 常见的爬虫分析库(2)-xpath语法

    xpath简介 1.xpath使用路径表达式在xml和html中进行导航 2.xpath包含标准函数库 3.xpath是一个w3c的标准 xpath节点关系 1.父节点 2.子节点 3.同胞节点 4. ...

  9. PaperNotes Instance-Level Salient Object Segmentation

    title: PaperNotes Instance-Level Salient Object Segmentation comments: true date: 2017-12-20 13:53:1 ...

  10. 微信支付JSAPI掉不起来支付按钮是什么原因?(原创)

    两种可能: 1.支付页面的js参数有问题 2.微信支付的配置有问题,大概率在微信支付授权目录是否有填写正确