vue 多行文字滚动停顿

结合c s s定位与j s控制marginTop 累加数组实现无缝滚动并停顿


<div class="fixBox"><div id="mesBox" class="anim><div class="item" v-for="(item,index) in options" :key="index">{{item.name}}</div></div>
</div>data(){return{options:[{name:111},{name:112},{name:113},{name:114},{name:115}],marginTop:0}
},created(){setInterval(this.scroll,2000)
},
methods:{scroll(){var lineHeight = 24var lineCount = this.options.lenght//滚动到显示区域底部时 数组累加if(Math.abs(this.marginTop) >= (lineHeight*lineCount)-lineHeight*4){// this.marginTop = 0this.options = this.options.contact(this.options)}else{this.marginTop -= lineHeight}document.getElementById('mesBox').style.top = this.marginTop + 'px'}
}<style>.fixBox{width:400px;height:96px;overflow:hidden;position:relative;#mesBox{position:absolute;top:0;width:400px;.item{height:24px;line-height:24px;}}.anim{transition:all 1s;}}
</style>

vue 多行文字滚动停顿相关推荐

Vue中实现文字向上滚动的动画效果
在Vue中,想要实现文字向上滚动的效果,分成两种情况: 1 无缝滚动无缝滚动如图: 我说的无缝滚动主要是指两点: 滚动中没有停顿从头至尾再循环播放时没有停顿实现这种情况可以使用CSS3的动画实现 ...
jquery实现多行文字图片滚动效果
基于jquery的实现多行文字图片滚动的效果代码,如果我们在论坛公告等等这些实例了,下面我来给各位朋友介绍介绍. 1 <div id="scrollDiv"> 2 &l ...
vue控制多行文字展开收起
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号. 点击"显示更 ...
vue中多行文本标签_vue控制多行文字展开收起的实现示例
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号.点击"显示更多 ...
html 公告栏上下滚动,vue实现公告栏文字上下滚动效果
代码实现: 在项目结构的components中新建text-scroll.vue文件 {{text.val}} export default { name: 'TextScroll', props: ...
html marquee css,HTML之marquee(文字滚动)详解_html/css_WEB-ITnose
语法: 以下是一个最简单的例子: 代码如下: Hello, World 下面这两个事件经常用到: onMouseOut="this.start()" :用来设置鼠标移出该区域时继续 ...
HTML之marquee(文字滚动)详解
以下是一个最简单的例子: 代码如下: <marquee direction="right" bgcolor="#fff" scrolldelay=&quo ...
jquery textSlider 文字滚动
这是文字滚动插件,自动滚动,向上滚动,向下滚动功能: 调用方法 $(document).ready(function(){ $("#scrollDiv").textSlide ...
【jQuery插件】textSlider 文字滚动插件
这是文字滚动插件,自动滚动,向上滚动,向下滚动功能: 调用方法: JavaScript代码 $(document).ready(function(){ $("#scrollDiv" ...

vue 多行文字滚动停顿

vue 多行文字滚动停顿相关推荐

最新文章

热门文章

vue 多行文字滚动 停顿

vue 多行文字滚动 停顿相关推荐

最新文章

热门文章

vue 多行文字滚动停顿

vue 多行文字滚动停顿相关推荐