客户想要一个跑马灯的效果,最终我用了jquery.marquee.js。

这个库很简单就能用。

效果是这样,从左到右,移动速度都不一样。

1. HTML

<div class="marqueeSlogan" data-direction="right">
<font style="font-size:38px; font-family:MonotypeSceneStdLight;">Look before you leap.</font>
</div>

2. JS

<script>
$('.marqueeSlogan').marquee({
duration: 3500
});
</script>

Done.

jquery.marquee.js - 有点奇怪的跑马灯动画,不过还是加上去了的更多相关文章

  1. 使用 JS 实现图片左右跑马灯

    Ø  前言 之前写了一篇使用 JS 实现文字上下跑马灯,现在乘热打铁在把图片左右跑马灯一起贴出来,不多说直接看代码. 1.   首先定义 css 样式 <style type="tex ...

  2. 使用 JS 实现文字左右跑马灯

    Ø  前言 其实,前面两篇已经基本上实现了图片.文字跑马灯,这里为什么还要学下文字左右跑马灯呢?因为,虽然基本一样,但实现起来还是有很大不同的,所以为了完整再补充一下.代码如下: 1.   首先定义 ...

  3. 使用 JS 实现文字上下跑马灯

    Ø  前言 今天在做商城首页时,遇到一个上下跑马灯功能,因为之前也只是接触过左右的跑马灯,一时还不知道从何下手.在网上看了几个 demo,并亲自运行了一下,是可以实现的.但是,能运行不知其所以然也不行 ...

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

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

  5. liMarquee – jQuery无缝滚动插件(制作跑马灯效果)

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  6. JS写一个列表跑马灯效果--基于touchslide.js

    先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...

  7. jQuery的JS库在本地运行项目时提示无法加载

    最近公司有个项目在我本地运行时引用本地的jquery.js,浏览器提示无法加载 <script src="/js/newperson/jquery-1.11.3.min.js" ...

  8. 使用jquery.more.js来实现点击底部更多后, 底部加载出新的数据

    <div class="bus-nav-bar ft12"> <div class="navt bor-r-c pos-rel {if $int == ...

  9. jquery/原生js/css3 实现瀑布流以及下拉底部加载

    思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...

随机推荐

  1. HDU - 1114 Piggy-Bank(完全背包讲解)

    题意:背包重量为F-E,有N种硬币,价值为Pi,重量为Wi,硬币个数enough(无穷多个),问若要将背包完全塞满,最少需要多少钱,若塞不满输出“This is impossible.”. 分析:完全 ...

  2. 3 react 简书 添加 头部搜索动态效果

    1. 添加动态效果组件 yarn add react-transition-group 2. 修改 src/common/header/index.js import React, {Componen ...

  3. 《新标准C++程序设计》1.1-1.6(C++学习笔记1)

    1.cout输出 cout<<待输出项<<待输出项2<<···; 2.cin输入 cin>>变量1>>变量2>>···; 3.C ...

  4. SQL中将某个字段根据分隔符分割成两个字段

    假设有表如下: 商品名称 耐克/DS001 安踏/AT002 阿迪达斯/AD009 使用SQL将[商品名称]字段按照分隔符‘/’进行分割后实现以下效果: 品牌 商品代码 耐克 DS001 安踏 AT0 ...

  5. Centos 7.4 DNS域名解析

    1.安装部署包 yum -y install bind bind-utils bind-chroot 2.启动服务并设置开机自启动 [root@localhost ~]# systemctl star ...

  6. 尝试用kotlin做一个app(四)

    本来是应该为主页加载数据库数据了,但是想着做后台,之前写jsp后台写吐了,所以先拖几天.把之前的代码完善一下,或者添加些新内容. ...... 多个fragment切换卡顿 首先修正一个bug.从主页 ...

  7. VScode 修改中文字体

    打开vscode ctrl+,打开设置 找到font,第一个是首选的英文字体,第二个是中文字体.

  8. HashMap源码阅读笔记

    HashMap源码阅读笔记 本文在此博客的内容上进行了部分修改,旨在加深笔者对HashMap的理解,暂不讨论红黑树相关逻辑 概述   HashMap作为经常使用到的类,大多时候都是只知道大概原理,比如 ...

  9. C语言的字符串类型

    C语言使用指针来管理字符串(1)C语言中定义字符串的方法:char *p = "linux";此时p就叫字符串,但是实际上p只是一个字符指针(本质上就是一个指针变量,只是p指向了一 ...

  10. LINUX文件目录存放文件说明

    /bin bin是Binary的缩写.这个目录存放着最经常使用的命令. /boot这里存放的是启动Linux时使用的一些核心文件,包括一些连接文件以及镜像文件. /dev dev是Device(设备) ...