帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

简单的jQuery(marquee)文本水平滚动动画插件

帝国模板之家 2020-11-05 网页特效 评论

marquee是一款简单的 jQuery文本水平滚动插件 ,项目列表从右到左滚动,可以设置速度,暂停,适用于新闻播报或滚动块。

使用方法

1. 加载jQuery库和marquee.js插件文件。

<script src="jquery-1.12.4.min.js"></script>
<script src="marquee.js"></script>

2. 创建一个滚动的项目列表。

<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>

3. 自定义插件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;
}

4. 初始化插件。

$(function (){
  createMarquee();
});

5. 默认参数。

$(function (){
createMarquee({
  // auto starts on page load
  autostart: true,
  // callback
  onComplete: function(){},
  // 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,
  // 0-1
  velocity: 0,
  // or right
  direction: 'left'
});
});

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言