jquery标题左右移动动画

最新推荐文章于 2024-09-20 14:11:16 发布

原创最新推荐文章于 2024-09-20 14:11:16 发布 · 900 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个使用HTML, CSS和jQuery实现的菜单标题动画效果。该效果使得标题在指定范围内左右移动，通过设置动画时间和回调函数来实现循环播放，为用户提供了一种新颖的视觉体验。

标题会在红框范围内来回移动

这里写图片描述

html和css代码

<div class="menu-notice" @click="check_cart">
        <div class="menu-notice-logo"></div>
        <div class="menu-notice-title" ref="noticeTitle">
          {{storeinfo[0] ? storeinfo[0]['name'] : ''}}
        </div>
      </div>

.menu-container .menu-notice{
  height: 45px;
  line-height: 45px;
  background: #fff9df;
  position: relative;
}
.menu-container .menu-notice:after{
  content: "";
  display: block;
  width: 0;
  height: 0;
  visibility: hidden;
  clear: both;
}
.menu-notice .menu-notice-logo,.menu-notice .menu-notice-title{
  float: left;
  height: 45px;
}
.menu-notice .menu-notice-logo{
  width: 50px;
  background: url("../../assets/notice2.png") no-repeat center center;
  background-size: 50%;
}
.menu-notice .menu-notice-title{
  position: absolute;
  left: 50px;
  top: 0px;
  font-size: 15px;
  color: #666;
  font-weight: 600;
}

jquery代码

blockMove: function () {
      let that = this;
      let noticeTitle = this.$refs.noticeTitle.offsetWidth ? this.$refs.noticeTitle.offsetWidth : 100;
      let menuContainer = this.$refs.menuContainer.clientWidth - (20 + noticeTitle);
      if($('.menu-notice-title').position().left == 50){
          $('.menu-notice-title').stop().animate({
            left: menuContainer
          },15000,function () {
            that.blockMove();
          })
      }else{
          $('.menu-notice-title').stop().animate({
            left: '50px'
          },15000,function () {
            that.blockMove();
          })
      }
    }