使用方法:
使用该跑马灯特效之前要先引入jQuery和marquee.js文件。
<script src="jquery-1.11.2.min.js"></script><script src="marquee.js"></script>
HTML结构:
跑马灯中的文字使用无序列表来制作,外面使用一个<div>正敏作为包裹容器。
123456789101112 <div class="container"> <div class="marquee-sibling"> Breaking News </div> <div class="marquee"> <ul class="marquee-content-items"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div></div>
CSS样式:
下面是该跑马灯特效的一些基本样式。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 .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}
初始化插件:
123 $(function (){ createMarquee()})
在页面加载完毕之后,可以通过下面的方法来初始化该跑马灯插件。
配置参数:
下面是该跑马灯特效的可用配置参数。
12345678910111213141516171819202122232425262728 $(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 }) })
这个完全是我本人自己真实项目当中的代码
http://1.xifan00520.applinzi.com/weixin/index.html
其实不用js 用css3就能完成
代码如下
标签腔型:{
background: -webkit-gradient(linear,left top,right top,color-stop(0, #3CAF5A),color-stop(0.3, #3CAF5A),color-stop(0.5, white),color-stop(0.7, #3CAF5A),color-stop(1, #3CAF5A))
background-clip: text//文字背景区域
-webkit-background-clip: text
-webkit-text-fill-color: transparent
text-fill-color: transparent
-webkit-animation: slidetounlock 2s linear infinite//动画执伍扰猜行的参数 第一是 动画执行的名字 第二是所需时间 第三是执行动画的快慢infinite是均速 第四个参数是循环
animation: slidetounlock 2s linear infinite
}
为了兼容建议把写全 百分比是指动画执行到多少以后执行里面的动画
@keyframes slidetounlock{
0% {
background-position: -2rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 2rem 0
}
}
@-webkit-keyframes slidetounlock{
0% {
background-position: -2rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 2rem 0
}
}
@-moz-keyframes slidetounlock{
0% {
background-position: -1.1rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 1.1rem 0
}
}
@-ms-keyframes slidetounlock{
0% {
background-position: -1.1rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 1.1rem 0
}
}
@-o-keyframes slidetounlock{
0% {
background-position: -1.1rem 0
}
80% {
background-position: 1rem 0
}
100% {
background-position: 1.1rem 0
}
}
之后你只需要设置文字所在容器的李敬宽度就行,用px可以代替rem;可根据自己的需求来修改
最后效果就是
白色会一直从左到右 有点像早期苹果滑动解锁的那种动画,这个可以根据实际需求来修改
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)