vue文字跑马灯效果
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文字跑马灯效果的更多相关文章
- vue实现跑马灯效果
vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...
- Android开发:文本控件详解——TextView(二)文字跑马灯效果实现
一.需要使用的属性: 1.android:ellipsize 作用:若文字过长,控制该控件如何显示. 对于同样的文字“Android开发:文本控件详解——TextView(二)文字跑马灯效果实现”,不 ...
- 黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
- 用jQuery实现参数自定义的文字跑马灯效果
一,明确需求 基本需求:最近在工作中接到一个新需求,简单来说就是实现一行文字从右到左跑马灯的效果,并且以固定的时间间隔进行循环. 原本这是一个很容易实现的需求,但是难点是要求很多参数得是用户可自行设置 ...
- JavaScript小实例-文字跑马灯效果
我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...
- 使用Vue做出跑马灯效果
<div id="pmd"> <h4> {{msg}}</h4> <input type="b ...
- VUE之文字跑马灯效果
VUE之文字跑马灯效果 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> <me ...
- [转]实现文字跑马灯效果,scrolling text from right to left
<div> <marquee direction="left" behavior="scroll" scrollamount="10 ...
- 实现一个微信小程序组件:文字跑马灯效果
marquee.json { "component": true, "usingComponents": {} } marquee.wxml <!--co ...
随机推荐
- Tornado学习笔记(一) helloword/多进程/启动参数
前言 当你觉得你过得很舒服的时候,你肯定没有在进步.所以我想学习新的东西,然后选择了Tornado.因为我觉得Tornado更匹配目前的我的综合素质. Tornado学习笔记系列主要参考<int ...
- android7.0以上使用融云即使通讯的坑
一.连接服务器不走connect()方法 在android6.0以下,在使用融云sdk时,直接将依赖库引入到项目中即可.但是在7.0及以上时,直接应用会发现消息一直发送不出去,错误提示为dlopen ...
- Java红黑树详谈
定义 红黑树的主要是想对2-3查找树进行编码,尤其是对2-3查找树中的3-nodes节点添加额外的信息.红黑树中将节点之间的链接分为两种不同类型,红色链接,他用来链接两个2-nodes节点来表示一个3 ...
- mybatis 按in 函数参数顺序排序
使用 FIELD()函数 SELECT * FROM user WHERE id IN (72, 80, 69) ORDER BY FIELD(id, 72, 80, 69)
- Confluence 6 编辑站点欢迎消息使用模板编辑器的小提示
站点欢迎消息是一个模板而不是一个页面,所以你需要使用模板编辑器来对你的消息进行编辑. 你可以和在你 Confluence 中其他页面中一样,在站点欢迎消息模板中添加文本,连接和宏.但是添加图片的话会有 ...
- Confluence 6 配置默认语言界面
Confluence 6 配置默认语言使用的界面. https://www.cwiki.us/display/CONFLUENCEWIKI/Choosing+a+Default+Language
- Confluence 6 用户宏示例 - Formatted Panel
下面的用演示了如果还写一个用户宏,并在这个宏中创建一个格式化的面板,并且指定颜色.将会创建下面的面板: (Title) 注意:这个面板的标题为空,如果你没有给这个面板标题参数的话. Macro n ...
- 修改Mysql5.7的root密码
Mysql5.7修改root密码 禁用root密码 1.修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不 ...
- selenium之实现多窗口切换到自己想要的窗口
#coding=utf-8 from selenium import webdriver import time from selenium.webdriver.support import expe ...
- ajax对象方法的使用
change.js文件的内容对象函数关键字:fnjQuery.fn.change = function () { this.css({"background": "red ...