jQuery.Marquee菜鸟攻略_基于 jquery 实现的 marquee 无缝滚动插件

jQuery.Marquee菜鸟攻略

官方网址:http://aamirafridi.com/jquery/jquery-marquee-plugin

jQuery.Marquee菜鸟攻略_基于 jquery 实现的 marquee 无缝滚动插件

GitHub:https://github.com/aamirafridi/jQuery.Marquee

简介描述:基于 jquery 实现的 marquee 无缝滚动插件

jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。 

 jQueryMarquee一共有三个可选参数,一个回调方法。

$(dom).marquee(options, callback);

options 可选参数:

options : {
    direction : 'top',
    pixels : 5,
    speed : 30,
}

direction

移动方向:
    左:left
    右:right
    上:top
    下:bottom;

pixels

每次移动的像素数

speed

两次移动之前的间隔时间数(毫秒)

调用方法如下:

$("scroll-a").marquee();
 
$("scroll-b").marquee({direction:'top'});

$("scroll-c").marquee({direction:'right',pixels:2,speed:30});
 
$("scroll-d").marquee({direction:"bottom",pixels:2,speed:30}, function(){
    console.log("执行了一次");
});


海计划公众号
(0)
上一篇 2020/03/10 01:30
下一篇 2020/03/10 01:30

您可能感兴趣的内容

  • Angular有哪些版本?基础入门_angular小白攻略

    目前Angular有7个版本,分别为:AngularJS、Angular2、Angular4、Angular5、Angular6、Angular7、Angular8。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。版本1AngularJS是一款由Google维护的开源JavaScript库,用来协助单一页面应用程序运行。它的目标是透过MVC模式(MVC)

    2020/03/22
  • vue中监听路由参数的变化攻略教程_参数小白教程

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新。mounted: () =>{this.id = this.$route.query.id;this.getdetail()
    }getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数。可以添加路由监听:watch:

    2020/03/23
  • Nodejs之使用express框架搭建WEB应用使用帮助_框架小白常识

    首先创建一个index.js,在里面引入相关的中间件,如果没有这些中间件,则需要在nodejs里进入index.js所在的文件夹安装这些模块,安装命令:npm install express express-static cookie cookie-session body-parser multer mysql,并且创建好www文件夹和views文件夹,w

    2020/03/29
  • vue3.x 新特性 – CompositionAPI使用教程_vue3零基础入门

    0. 基础要求了解常见的 ES6 新特性ES6 的导入导出语法解构赋值箭头函数etc…了解 vue 2.x 的基本使用组件常用的指令生命周期函数computed、watch、ref 等1. 相关资源【知乎 – Vue Function-based API RFC】https://zhuanlan.zhihu.com/p/68477600【github –

    2020/03/24
  • 需要关注的5大Android开发技术使用攻略_Android菜鸟攻略

    虽然编程环境每天都有新变化,但 Android 无疑是其中更新迭代最频繁的,每年甚至每个月都有新东西。本文介绍了 2020 年开发者最需要关注的 5 大 Android 开发技术。在众多 Android 开发团队参加的 Droidcon London 2019 大会上,一系列新技术令人眼花缭乱。从 Joe Birch 介绍的 无障碍智能吉他 到即将到来的 J

    2020/03/22
  • 十大技术趋势小白教程_技术菜鸟攻略

    变化是唯一不变的。这也适用于我们的职业生涯。如今技术发展非常迅速。 下面十大技术预计将在2020年获得巨大市场。人工智能区块链增强现实和虚拟现实认知云计算Angular和React开发运维物联网(IoT)智能应用程序大数据RPA(机器人过程自动化)RPA通常,任何行业中的任何桌面工作都涉及本质上是重复的并且可以自动化的任务。RPA或机器人过程自动化使您可以自

    2020/03/20
  • typescript-book-chinese使用教程_TypeScript Deep Dive 中文版

    typescript-book-chinese使用教程 官方网址:https://jkchao.github.io/typescript-book-chinese/ GitHub:…

    2020/03/10
  • PHP使用redis防止大并发下二次写入小白指南_redis入门基础教程

    php调用redis进去读写操作,大并发下会出现:读取key1,没有内容则写入内容,但是大并发下会出现同时多个php进程写入的情况,这个时候需要加一个锁,即获取锁的php进程有权限写。$lock_key = ‘LOCK_PREFIX‘ . $redis_key;
    $is_lock = $redis->setnx($lock_key, 1); // 加锁
    if

    2020/03/31
  • vue懒加载小白攻略_懒加载小白基础

    一、 什么是懒加载懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。二、为什么需要懒加载在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时1、路由懒加载:exp

    2020/03/23
  • Php将数据按照千分位分割的5种方法入门指南_数据小白教程

    题目:将1234567890按照千分位分割,结果为”1,234,567,890.00″形式(这里保留了二位小数,按题目实际要求处理)分析:添加千分位分割符是从个位往高位数的,因此要考虑从后往前处理字符串。方法一:调用php函数处理。直接使用php的函数,但面试要求实现的应该是不让使用系统函数的$res = number_format($num);方法二:

    2020/03/24
  • Vue.js中的computed工作原理入门知识深入理解 Vue的Computed计算属性_Vue入门基础

    JS属性:JavaScript有一个特性是 Object.defineProperty ,它能做很多事,但我在这篇文章只专注于这个方法中的一个:var person = {};
    Object.defineProperty (person, ‘age’, {get: function () {console.log (“Getting the age”);re

    2020/04/03
  • 字体,字号与尺寸对应表小白教程_单位入门指南

    字体,字号与尺寸对应表小白教程 了解字体的一样常识,不管做一份文档编辑还是网页开发,都是很有必要的。整齐划一,井然有序才终是大家之道。 1.字体 在文档编辑中,我们常用的是宋体,小…

    2020/03/19
  • CSS 使用calc()获取当前可视屏幕高度菜鸟指南_高度小白教程

    先了解一下CSS3的相对长度单位:相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。em 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px;ex 依赖于英文字母小 x 的高度ch 数字 0 的宽度rem 根元素(html)的 font-sizevw vie

    2020/03/29
  • 水印项目的实现以及两种实现方案的选优入门基础教程_项目小白常识

    水印项目我们提出了两种解决方案一、用shadow dom实现1、基本思路通过 attachShadow 这个方法生成一个shadow root 即shadow的根节点,然后在这个根节点下面通过循环语句添加水印,利用position为absolute进行排版,使其铺满容器 show me the code:(function (root, factory) {

    2020/03/29
  • css盒子模型的深入理解,在块级、行内元素的区别和特性小白知识_盒子小白基础

    css盒子模型用于处理元素的内容、内边距、边框和外边距的方式简称。元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和

    2020/04/06
  • pexels小白教程_顶级免费高清无版权摄影图片素材库

    pexels小白教程 官方网址:https://www.pexels.com/ 简介描述:顶级免费高清无版权摄影图片素材库 做网站或者设计海报都需要用到一些高清图片,虽说搜索引擎可…

    2020/03/06