js跑马灯实现上下左右滚动 translateY translateYX

<div class="h90 hlc">
<img class="w50 h35 mlr30" src="http://192.168.1.240:8080/ypStatic/img/index/notice.png" />
<div class="h40 overflow">
<div class=" f28pc text1 marquee" :style="{'transform':'translateY('+translateY+'rpx)','transition':'transform '+transform+'ms'}" >
<p class="text1 w600" v-for="item in 6" :key="item">测试跑马灯跑马灯跑马灯{{item}}</p>
</div>
</div>
</div>

<div class="h90 hlc">
<img class="w50 h35 mlr30" src="http://192.168.1.240:8080/ypStatic/img/index/notice.png" />
<div class="h40 overflow w640">
<div class=" f28pc marquee1 hlc" :style="{'transform':'translateX('+translateX+'rpx)','transition':'transform '+transform+'ms'}" >
<p class="text1 w600" v-for="item in 6" :key="item">测试跑马灯跑马灯跑马灯{{item}}</p>
</div>
</div>
</div>

css
.h90 {
height:90rpx;
}
.hlc {
display: flex;
justify-content: flex-start;
align-items: center;
}
.w50{
width:50rpx;
}
.h35 {
height:35rpx;

}
.mlr30 {
margin-left:30rpx;
margin-right:30rpx;

}
.overflow {
overflow:hidden;

}
.h40 {
height:40rpx;

}
.hlc {
display: flex;
justify-content: flex-start;
align-items: center;
}
.w600{
width:600rpx;
}
.text1 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

// 左右滚动
.marquee{
width: 100%;
background: #fff;
border: none;
display: block;
margin: 0 auto;
white-space: nowrap;
text-overflow: clip;
position: relative;
font-size: 28rpx;
height:auto;
}
.marquee p{
height: 40rpx;
display: block;
}
// 上下滚动
.w640{
width: 640rpx;
}

.marquee1{
width: auto;
background: #fff;
border: none;
display: block;
margin: 0 auto;
white-space: nowrap;
text-overflow: clip;
position: relative;
font-size: 28rpx;
height:40rpx;
}
.marquee1 p{
height: 40rpx;
display: inline-block;
width: 640rpx;
}

data：{
translateY:0,
transform:300,
index:0,
translateX:0,
}

this.marquee();
marquee(){
let that = this;
let index = that.index;

if(this.notice.length==2){

return;

}

if(index == 6){
// y
that.index =0;
that.translateY = 0;
that.transform = 0;
// x
that.translateX = 0;
}else{
// y
that.index = index +1;
that.translateY = '-'+index*40;
that.transform = 300;
// x
that.translateX = '-'+index*640;
}
setTimeout(() => this.marquee(), 3000);
},

js跑马灯实现上下左右滚动 translateY translateYX相关推荐

JS 跑马灯效果实现（很好用）
原文地址为: JS 跑马灯效果实现(很好用) 实现跑马灯效果的JS很多,但是很多不好用,下面介绍一个比较好用的. 好用之处在于: 1 支持一个页面多个跑马灯效果 2.支持跑马灯内容的异步加载关键的实 ...
android无焦点跑马灯滚动,Android跑马灯无焦点滚动
如果对显示没有特别要求可以直接使用属性就能做到,在布局文件中将TextView属性设置一下: android:layout_width="fill_parent" android: ...
C#跑马灯，图片滚动，后台获取图片地址。动态绑定图片，imag显示文字
下面附下载地址. http://download.csdn.net/download/njxiaogui/10002058 1.跑马灯效果,图片连续循环滚动,图片下面并可附文字描述,图片是从数据库中获 ...
android 跑马灯停顿,JS跑马灯滚动每行中间有停顿
setInterval(function() { //隐藏报表块REPORT0的滚动条 $("div[widgetname=REPORT0]").find(".froze ...
vue实现轮播图（跑马灯、无缝滚动、无限切换效果）
Vue简简单单实现无缝滚动轮播图效果,不依赖任何第三方插件或组件,复制粘贴开箱即用,简简单单,干净卫生主页里还有淡入淡出轮播图,地址如下: https://blog.csdn.net/m0_5922 ...
Android开发实现跑马灯效果滚动字幕
Android开发实现跑马灯效果滚动字幕 ~! ~ !~ 浙江温州!~ 浙江温州!~江南皮革厂倒闭了! 黄鹤老板欠下了3.5个亿 ! 带着他的小姨子跑了! 我们没有办法没有办法,拿着钱包抵工资, ...
android:ellipsize = marquee 跑马灯,TextView设置android:ellipsize=marquee不滚动
今天发现android开发中有一个android:ellipsize=marquee,这个感觉像html中的marquee功能,可以实现滚动效果,于是测试了一下,结果不行呀,后来百度了一下解决办法,下 ...
android:ellipsize = marquee 跑马灯,Android基于TextView属性android:ellipsize实现跑马灯效果的方法...
本文实例讲述了Android基于TextView属性android:ellipsize实现跑马灯效果的方法.分享给大家供大家参考,具体如下: Android系统中TextView实现跑马灯效果,必须具 ...
css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片
先上效果图首先呈上效果图,主要是针对图片跑马灯效果(请忽略我的快速播放和录屏图标) 具体实现方式目前我需要展示6张图片,但是为了实现无缝衔接,我的列表放了12张(放2遍图片),这样就不至于在切换时 ...
html js 图片跑马灯,jquery跑马灯图片不间断滚动效果
在网页中为了显示更多内容,界面更美观,通常会用到"跑马灯"效果. 打开 Dreamweaver新建 HTML 文档:修改标题为"跑马灯"保存为 index.ht ...

js跑马灯实现上下左右滚动 translateY translateYX

js跑马灯实现上下左右滚动 translateY translateYX相关推荐

最新文章

热门文章