js在html中加文字走马灯特效,jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件。该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动。
更新时间:2018/2/8 下午3:21:52
更新说明:修正8个li以后的重叠问题。
这是一款非常简单的jQuery文字跑马灯特效插件。该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动。
使用方法
使用该跑马灯特效之前要先引入jQuery和marquee.js文件。
HTML结构
跑马灯中的文字使用无序列表来制作,外面使用一个
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
CSS样式
下面是该跑马灯特效的一些基本样式。.container {
width: 100%;
background: #4FC2E5;
float: left;
display: inline-block;
overflow: hidden;
box-sizing: border-box;
height: 45px;
position: relative;
cursor: pointer;
}
.marquee-sibling {
padding: 0;
background: #3BB0D6;
width: 20%;
height: 45px;
line-height: 42px;
font-size: 12px;
font-weight: normal;
color: #ffffff;
text-align: center;
float: left;
left: 0;
z-index: 2000;
}
.marquee,
*[class^="marquee"] {
display: inline-block;
white-space: nowrap;
position: absolute;
}
.marquee { margin-left: 25%; }
.marquee-content-items {
display: inline-block;
padding: 5px;
margin: 0;
height: 45px;
position: relative;
}
.marquee-content-items li {
display: inline-block;
line-height: 35px;
color: #fff;
}
.marquee-content-items li:after {
content: "|";
margin: 0 1em;
}
初始化插件$(function (){
createMarquee();
});
在页面加载完毕之后,可以通过下面的方法来初始化该跑马灯插件。
配置参数
下面是该跑马灯特效的可用配置参数。$(function (){
createMarquee({
// controls the speed at which the marquee moves
duration:30000,
// right margin between consecutive marquees
padding:20,
// class of the actual div or span that will be used to create the marquee -
// multiple marquee items may be created using this item's content.
// This item will be removed from the dom
marquee_class:'.example-marquee',
// the container div in which the marquee content will animate.
container_class: '.example-container',
// a sibling item to the marqueed item that affects -
// the end point position and available space inside the container.
sibling_class: '.example-sibling',
// Boolean to indicate whether pause on hover should is required.
hover: false
});
});
js在html中加文字走马灯特效,jQuery简单的文字跑马灯特效相关推荐
- jquery 立体走马灯_jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
- 原生JS实现图片跑马灯特效
今天给大家分享一个用原生JS实现的图片跑马灯特效,效果如下: 实现的代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html><head><m ...
- 7.纯 CSS 创作一个 3D 文字跑马灯特效
7.纯 CSS 创作一个 3D 文字跑马灯特效 原文地址:https://segmentfault.com/a/1190000014663038 感想:简单的从右到左动画 HTML代码: <di ...
- STM8S自学笔记-003 GPIO输出:点亮LED灯 and 跑马灯特效
STM8S自学笔记-003 GPIO输出:点亮LED灯 and 跑马灯特效 点亮LED GPIO初始化函数:GPIO_Init() GPIO电平操作库函数:GPIO_WriteHigh().GPIO_ ...
- 【IOS】最简单方式实现跑马灯文字效果
实现跑马等效果,如果想要实现,头部跟尾部同时出现在一个屏幕中的话,应该使用两个 Label 比较好实现,于是有了以下思路. @interface JDMarqueeView ()@property ( ...
- 网站顶部的跑马灯特效代码
跑马灯的方法很多,其中最简单的是采用一句Html代码来实现 放置说明 放在头部head里即可 代码 <style> #top-grrk{ background:url(https://ex ...
- Arcgis for js,Openlayers中加载GeoJSON
概述: 在前文中,讲述了在JAVA环境下如何将shp转换为GeoJSON,在本文,分别讲述在Arcgis for js,Openlayers2和Openlayers3中加载展示GeoJSON. 实现: ...
- 使用 pdf.js 在网页中加载 pdf 文件
在网页中加载并显示PDF文件是最常见的业务需求.例如以下应用场景:(1)在电商网站上购物之后,下载电子发票之前先预览发票.(2)电子政务管理系统中查看发布的公文,公文文件一般是PDF格式的文件. 目前 ...
- html怎么在字体中加波浪线,强大的CSS:文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现 就是使用径 ...
最新文章
- AWS无服务开发Lambda系列之本地上传包至Lambda
- hive 表存储大小_Hive中文件存储格式及大小比较测试
- 小狗扫地机器人与石头_当戴森遇到石头机器人,从容应对 “猫狗拆家”
- 数据结构之图:有向图的介绍与实现,Python代码实现——25
- typescript 接口 java_Typescript基础(4)——接口
- [20151112]ORA-01450?3215?.txt
- python main传参args,详解用Python处理Args的3种方法
- c语言电子时钟设计报告,电子时钟设计实验报告.doc
- Mac打包生成加密dmg
- Google Daydream实验室:VR设计的三大要素
- Cocoapods使用代理
- Win10怎么录制高清的电脑屏幕?Win10屏幕录制工具哪个好?
- 数字图像处理 图像形态学处理
- spark sql 之 collect_set collect_list 后WrappedArray 取值
- 最近用了一个免费的服务器
- opencv--图像特征提取与描述
- Component template should contain exactly one root element
- 方波信号傅里叶级数展开
- 再论”核高基“培育”外国种“,歪名传四方
- 讼卦,帮助你处理好和上级的关系
热门文章
- 软件设计师学习1——计算机系统知识
- 从Google Scholar看各大科技公司科研水平
- python中get和getall_Scrapy框架get() 、getall() 、extract() 、extract_first()的区别
- qt布局调用自定义函数_QT 自定义函数 自定义信号和槽
- Star Schema完全参考手册学习笔记九
- 面试题简答题——操作系统相关汇总
- Redis基础(四)——持久化
- 聚类算法—K-means python实现
- VSCode配置jupyter逐行语句运行python
- Android 6.0 API