设置走马灯效果滚动条

练习两年半的实习生

于 2022-09-15 10:50:07 发布

阅读量213

点赞数

分类专栏： Vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Yuhang_Zhou/article/details/126866868

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述
效果图

				<div class="msgNotice" v-if="mesData.length>0">
					<div class="msgInsideStrip">
						<img src="~/Content/fimg/horn-white.png" />
						<div id="affiche_real">
							<div class="affiche_text"></div>
						</div>
					</div>
				</div>

h5代码

//vue方法  获取需要滚动的文字 调用滚动方法
			getMessDate: function () {
                    var that = this;
                    $.post("@Url.Action("GetMessages", "MessagesApi")", function (res) {
                        that.mesData = [];
                        that.mesData = res.data;
                        if (res.data.length > 0) {
                            that.$nextTick(function () {
                                that.marquee();
                            });
                        }
                    });

                },
                //滚动方法
                marquee: function () {
                    var scrollWidth = $('#affiche_real').width();            //滚动区域宽度
                    var index = 0;
                    $('.affiche_text').text(layoutEl.mesData[index]);
                    var textWidth = $('.affiche_text').width();     //文字宽度（px）
                    var i = scrollWidth;
                    setInterval(function () {
                        i--;
                        if (i <= -textWidth) {
                            index++;
                            if (index === layoutEl.mesData.length) {
                                index = 0;
                            }
                            $('.affiche_text').text(layoutEl.mesData[index]);
                            textWidth = $('.affiche_text').width();
                            i = scrollWidth;
                        }
                        $('.affiche_text').animate({ 'left': i + 'px' }, 0);
                    }, 15);
                },