js在html中加⽂字⾛马灯特效,jQuery简单的⽂字跑马灯特效
插件描述：这是⼀款⾮常简单的jQuery⽂字跑马灯特效插件。该跑马灯特效使⽂本从右向左不停循环，当⿏标放到跑马灯上的⽂字时，跑马灯会暂停运动。
更新时间：2018/2/8 下午3:21:52
更新说明：修正8个li以后的重叠问题。
这是⼀款⾮常简单的jQuery⽂字跑马灯特效插件。该跑马灯特效使⽂本从右向左不停循环，当⿏标放到跑马灯上的⽂字时，跑马灯会暂停运动。
使⽤⽅法
使⽤该跑马灯特效之前要先引⼊jQuery和marquee.js⽂件。
HTML结构
跑马灯中的⽂字使⽤⽆序列表来制作，外⾯使⽤⼀个
jquery免费特效下载作为包裹容器。
Breaking News
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
});
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。