一行文字跑马灯怎样用Jquery或js做?

一行文字跑马灯怎样用Jquery或js做?,第1张

使用方法:

使用该跑马灯特效之前要先引入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;可根据自己的需求来修改

最后效果就是

白色会一直从左到右 有点像早期苹果滑动解锁的那种动画,这个可以根据实际需求来修改


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12568681.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-26
下一篇 2023-05-26

发表评论

登录后才能评论

评论列表(0条)

保存