標題會在紅框范圍內來回移動

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();})}}

總結

以上是生活随笔為你收集整理的jquery标题左右移动动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。