marquee 滚动到文字上时停止滚动，自定义停止方法

我要实现的效果如下图：当鼠标移到续费提醒文字上时，文字滚动停止，并出现后面的关闭按钮；当鼠标移出文字时，文字继续滚动，后面的关闭按钮不显示。

在网上查到的marquee停止滚动的的代码是这样的：

<marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" ：用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()"：用来设置鼠标移入该区域时停止滚动</marquee>

但是这样有几个问题：1、鼠标移入marquee标签时就停止了，我要实现的是移入文字部分； 2、移入marquee 如何实现控制关闭按钮的显示隐藏

解决问题的方式：将鼠标移入和移出相关的方法加在包裹文字和关闭按钮的div上，自定义事件去处理关闭按钮的显示和隐藏

我的HTML部分的代码如下：

<div class="marqueeDiv" v-if="showCarouselData">

        <marquee id="marquee" class="marquee" scrollamount="5" >

            <div class="marqueeSpanBox" @mouseover="marqueeMove()" @mouseleave="marqueeOut()">

                <span class="marqueeSpan">{{carouselData}}</span>

                <i class="el-icon-close marqueeCloseBox" v-if="showCarCloseBtn" @click="closeMarquee"></i>

            </div>

        </marquee>

    </div>

js部分代码：

marqueeMove:function(){

                var marquee = document.getElementById('marquee');

                marquee.stop();

                this.showCarCloseBtn = true;  //显示关闭按钮

            },

            marqueeOut:function(){

                var marquee = document.getElementById('marquee');

                marquee.start();

                this.showCarCloseBtn = false;  //隐藏关闭按钮

            },

            closeMarquee:function(){

                this.showCarouselData = false;

            }

鼠标移出事件我刚开始用的mouseout，但是有遇到问题，就是当我鼠标移出上面绿框的文字部分，关闭按钮就消失，后面将mouseout改成了mouseleave

它们的主要区别：

mouseout在鼠标指针离开绑定元素的任何子元素时也会触发；

mouseleave在鼠标指针离开绑定元素的任何子元素时不会触发；

其中还有一点element-ui的图标改大小是直接设置font-size就好了

上面的错误犯过两次了，记一下，不能再犯第三次

巴特西

marquee 滚动到文字上时停止滚动，自定义停止方法

最新文章

热门文章