vue2.6实现新闻滚动播放代码

组件可以直接复制展示

<template><div class="fy-wrap"><div class="scroll-body"ref="scrollBody":style="scrollBodyStyle"@mouseenter="onMouseEnter"@mouseleave="onMouseLeave"@transitionend="onTransitionend"><div class="origin"><div class="item"v-for="item in data":key="item.id"ref="item"><div class="content text-ellipsis" :title="item.name">{{ item.name}}</div></div></div><div class="copy"><div class="item"v-for="item in data":key="item.id"><div class="content text-ellipsis" :title="item.name">{{ item.name}}</div></div></div></div></div>
</template><script>
export default {data() {return {timer:null,scrollBodyStyle:{},translateY:0,data:[{id:1,name:'测试1'},{id:2,name:'测试2'},{id:3,name:'测试3'},{id:4,name:'测试4'},{id:5,name:'测试5'}]};},props: {},computed: {},created() {},mounted() {this.loop();},beforeDestroy() {clearTimeout(this.timer);},watch: {},methods: {onMouseEnter(){clearTimeout(this.timer)},onMouseLeave(){this.loop();},onTransitionend(){let child = this.$refs.item[0];let {height:parentHeight} = this.$refs.scrollBody.getBoundingClientRect()if(child){if((parentHeight / (this.translateY )) <= 2){this.scrollBodyStyle={transform:`translateY(0px)`}this.translateY = 0;}}},loop(){if(this.data.length <=1){return;}this.timer = setTimeout(()=>{let child = this.$refs.item[0];if(child){let { height } = child.getBoundingClientRect();this.translateY += height;this.scrollBodyStyle = {transform:`translateY(-${this.translateY}px)`,transition: 'all .3s'}}this.loop();},3000)}},components: {},
};
</script><style lang="scss" scoped>.fy-wrap{max-height: 50px;overflow: hidden;.scroll-body{}.item{@include flex-row;background-color: rgba(12, 25, 28, 0.7);padding: 10px 40px;cursor: pointer;height: 50px;.content{color: #999;max-width: 200px;font-size: 14px;}}}
</style>

vue2.6实现新闻滚动播放代码相关推荐

基于JS实现新闻列表无缝向上滚动实例代码
当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <h ...
转载博客 htm5l实现滚动播放
Yorhom's Game Box 用自己的双手绘画自己的游戏天地,用自己的智慧换取成功的喜悦目录视图摘要视图订阅 [免费公开课]Gulp前端自动化教程 [专家问答]陈绍英:大型IT系统性能 ...
JQuery——BreakingNews.js新闻滚动效果
BreakingNews.js新闻滚动效果这里是直观效果展示使用这种效果我们需要三个包 jq.min.js BreakingNews.css breakingnews.js breakingnew ...
js实现新闻滚动-单行滚动或者多行滚动
注明:都是转载. 先说单行滚动: --------直接复制以下代码即可试验转载http://www.3lian.com/edu/2011/06-30/4986.html----------- < ...
仿网易新闻顶部菜单html,iOS仿网易新闻滚动导航条效果
本文实例为大家分享了iOS滚动导航条效果展示的具体代码,供大家参考,具体内容如下实现效果效果:选择不同的栏目,下面出现不同的视图,栏目条可以滚动:下面的视图也可以滚动,滚动时上面对应的栏目要选中颜 ...
如何在大屏幕上滚动播放视频、图片和文字
传统方法在各种大屏上滚动播放视频.图片和文字的方法通常有如下两种: 1)使用视频播放软件,创建播放列表进行播放 2)使用信息发布系统,创建播放列表进行播放第1种方法相对比较Low,需要到连接屏幕的 ...
CSS实现横向图片滚动播放
CSS实现横向图片滚动播放以下示例代码拷走即可放到html中即可查看滚动效果:(仅供学习参考),核心代码查看CSS部分 <!doctype html> <html> < ...
js实现图片连续滚动播放
实现效果: 1.页面加载后,图片自动开始滚动播放 2.鼠标移入暂停,并放大显示,鼠标移出后继续滚动实现思路: 1.首先设置一个外框,固定宽度,超出范围的图片隐藏掉 2.复制一遍图片列表,追加一组在当 ...
留言滚动栏，html滚动代码，滚动留言代码
留言滚动栏,一直滚动代码,在网上找了一圈没找到,自己写了一下午终于搞定! 效果如下: 注:1.单条留言高度,持续滚动,可直接复制使用.按自己需求调整css即可,已有注释,相信聪明的你肯定能看懂 2.如 ...

vue2.6实现新闻滚动播放代码

组件可以直接复制展示

vue2.6实现新闻滚动播放代码相关推荐

最新文章

热门文章