html中滚动字幕暂停,marquee 滚动到文字上时停止滚动，自定义停止方法

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

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

SEOut="this.start()" onMouSEOver="this.stop()">onMouSEOut="this.start()" ：用来设置鼠标移出该区域时继续滚动 onMouSEOver="this.stop()"：用来设置鼠标移入该区域时停止滚动

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

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

我的HTML部分的代码如下：

Box" @mouSEOver="marqueeMove()" @mouseleave="marqueeOut()">

Box" v-if="showCarCloseBtn" @click="closeMarquee">

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就好了

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

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！