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. 解决Javascript中$(window).resize()多次执行(转)

    https://www.cnblogs.com/shuilangyizu/p/6816756.html 有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配.这个 ...

  2. Eclipse切换工作空间(Workspace)

    通过主菜单 File(文件) -> Switch WorkSpace(切换工作空间).可以切换不同的工作空间,工作空间本身对应的是一个文件夹,其中会包含一个 .metadata 文件夹,应该是用 ...

  3. SQL Server 2016 Failover Cluster + ALwaysOn

    SQL Server 2016 Failover Cluster + ALwaysOn 环境的搭建 近期公司为了提高服务的可用性,就想到了部署AlwaysOn,之前的环境只是部署了SQL Server ...

  4. LeetCode(70): 爬楼梯

    Easy! 题目描述: 假设你正在爬楼梯.需要 n 步你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 ...

  5. 【python】安装hyperscan-python

    环境centos6.2 1. 先安装hyperscan 主要参考http://blog.csdn.net/cheng_fangang/article/details/51143412 注意:里面2.8 ...

  6. 【mongo】可以用localhost启动,无法用ip启动问题的解决

    问题: mongo安装在a.b.c.d机器上,启动mongo服务后, mongo localhost:27017可以进入数据库, mongo 127.0.0.1:27017也可以进入数据库 mongo ...

  7. 《剑指offer》从上往下打印二叉树

    本题来自<剑指offer> 从上往下打印二叉树 题目: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: 队列的思想. 先将根节点加入,当取该节点时候,依次将左右子树加入,直 ...

  8. java-HTML&javaSkcript&CSS&jQuery&ajax( 八)

    一.JavaScript教程笔记 1.在web页面中一般使用JavaScript脚本语言,支持跨平台,跨浏览器,驱动网页,与用户交互.另外Node.js把JavaScript引入到了服务器端. Jav ...

  9. node.js 的热更新

    1.安装 npm i supervisor -gd 2.运行 supervisor server.js //server.js 是你自己的服务的js文件

  10. jQuery核心方法

    1.$(document.body).css( "background", "black" ); 2.$(myForm.elements).hide():隐藏表 ...