小程序版本(弹幕形式)
<view class="marquee">
<view class="marquee_box" id="marquee_box" style='height:{{height}}'>
<view class="marquee_list" class="{{animate?'marquee_top':''}}" wx:if='{{list.length > 0}}'>
<view class="marquee_View" wx:for="{{list}}" wx:key="index">
<view>
<image class="marquee_Img" mode="aspectFill" src="{{item.headimgurl}}"></image>
<text class="swiText">{{item.nickname}}捐赠了{{item.yanzhi}}颜值</text>
</view>
</view>
</view>
</view>
</view>
data: {
animate: false,
showNum: 3,
list: [
{
nickname: '名字',
num: '100',
headimgurl: 'http://sucai.suoluomei.cn/sucai_zs/images/20210803164111-bg.png'
},
{
nickname: '名字222',
num: '1000',
headimgurl: 'http://sucai.suoluomei.cn/sucai_zs/images/20210803164111-bg.png'
},
{
nickname: '名字33333333',
num: '10',
headimgurl: 'http://sucai.suoluomei.cn/sucai_zs/images/20210803164111-bg.png'
},
{
nickname: '名字34444',
num: '10',
headimgurl: 'http://sucai.suoluomei.cn/sucai_zs/images/20210803164111-bg.png'
},
{
nickname: '名字555',
num: '10',
headimgurl: 'http://sucai.suoluomei.cn/sucai_zs/images/20210803164111-bg.png'
}
],
height: ''
},
onLoad(options) {
this.setData({
height: this.data.showNum * 70 + 'rpx'
})
setInterval(this.showMarquee, 2000)
},
showMarquee() {
this.data.list.push(this.data.list[0])
this.setData({
animate: true,
list: this.data.list
})
setTimeout(() => {
this.data.list.shift()
this.setData({
list: this.data.list,
animate: false
})
}, 1000)
},
.marquee {
width: 100%;
display: flex;
}
.marquee_box {
position: relative;
width: 100%;
overflow: hidden;
display: flex;
}
.marquee_list {
display: flex;
flex-direction: column;
}
.marquee_top {
transition: all 1s;
margin-top: -68rpx;
}
.marquee_View {
display: flex;
}
.marquee_View view {
display: flex;
flex-direction: row;
align-items: center;
margin: 15rpx 0 0 5rpx;
padding: 10rpx 20rpx;
box-sizing: border-box;
align-items: center;
font-size: 22rpx;
color: #fff;
background-color: rgba(000, 000, 000, 0.5);
border-radius: 50rpx;
}
.marquee_Img {
width: 35rpx;
height: 35rpx;
border-radius: 50%;
overflow: hidden;
margin-right: 15rpx;
}
.swiText {
max-width: 500rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Vue版本(如小程序一样,弹幕形式)
.marquee {
width: 100%;
display: flex;
position: absolute;
bottom: 1rem;
left: 0;
}
.marquee_box {
position: relative;
width: 100%;
overflow: hidden;
display: flex;
}
.marquee_list {
display: flex;
flex-direction: column;
}
.marquee_top {
transition: all 1s;
margin-top: -1.4rem;
}
.marquee_View {
display: flex;
}
.marquee_View div {
display: flex;
flex-direction: row;
align-items: center;
margin: 0.3rem 0 0 1rem;
padding: 0 .4rem;
box-sizing: border-box;
height: 1.5rem;
line-height: 1.5rem;
font-size: 0.8rem;
color: #fff;
background-color: rgba(000, 000, 000, 0.5);
border-radius: 1rem;
}
.marquee_View div img {
width: 0.875rem;
height: 0.875rem;
object-fit: cover;
border-radius: 50%;
overflow: hidden;
margin-right: 0.3rem;
}
.swiText {
max-width: 15rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="marquee">
<div class="marquee_box" ref="marquee_box">
<div class="marquee_list" :class="{marquee_top:animate}" v-if='list.length >0'>
<div class="marquee_View" v-for="(item,index) in list" :key="index">
<div>
<img v-lazy="item.headimgurl" />
<p class="swiText">
{{item.nickname}}捐赠了 {{item.yanzhi}}颜值</p>
</div>
</div>
</div>
</div>
</div>
data: {
animate: false,
showNum: 3,
list: [
{
nickname: '名字',
num: '100',
headimgurl: 'http://sucai.suoluomei.cn/sucai_zs/images/20210803164111-bg.png'
},
{
nickname: '名字222',
num: '1000',
headimgurl: 'http://sucai.suoluomei.cn/sucai_zs/images/20210803164111-bg.png'
},
{
nickname: '名字33333333',
num: '10',
headimgurl: 'http://sucai.suoluomei.cn/sucai_zs/images/20210803164111-bg.png'
}
],
},
created() {
let that = this
setInterval(this.showMarquee, 2000)
},
mounted() {
let that = this
this.$refs.marquee_box.style.height = this.showNum * 1.4 + 'rem'
},
methods: {
showMarquee() {
this.animate = true
this.list.push(this.list[0])
setTimeout(() => {
this.list.shift()
this.animate = false
}, 1000)
}
}
JQ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.notice {
width: 100%;
background-color: lightgray;
height: 1.56rem;
margin:0 auto 1rem;
}
.textbox {
width: 100%;
height: 1.56rem;
line-height: 1.56rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.textbox ul {
margin: 0;
padding: 0
}
.textbox li {
height: 1.56rem;
line-height: 1.56rem;
font-size: 12px;
text-align: center;
list-style-type: none;
}
</style>
<body>
<div id="Vue">
<div>
<div class="notice">
<div class="textbox" id="marqueebox0">
<ul id="fortext" class="fortext">
</ul>
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: "#Vue",
data: {
lists: [
{
text: "1恭喜兄弟你中奖了"
},
{
text: "2恭喜兄弟你中奖了"
},
{
text: "3恭喜兄弟你中奖了"
},
{
text: "4恭喜兄弟你中奖了"
},
{
text: "5恭喜兄弟你中奖了"
}
]
},
methods: {},
created() {
}
})
</script>
<script type="text/javascript">
$(document).ready(function () {
var daya = [
{
tes: "第一行"
},
{
tes: "第二行"
},
{
tes: "第三行"
},
{
tes: "第四行"
},
{
tes: "第五行"
},
]
let data = daya
var items = ''
for (let i = 0; i < data.length; i++) {
items += `
<li>${data[i].tes}</li>
`
}
$('.fortext').append(items)
function startmarquee(lh, speed, delay, index) {
var t;
var p = false;
var o = document.getElementById("marqueebox" + index);
o.innerHTML += o.innerHTML;
o.οnmοuseοver = function () {
p = true
}
o.οnmοuseοut = function () {
p = false
}
o.scrollTop = 0;
function start() {
t = setInterval(scrolling, speed);
if (!p) {
o.scrollTop += 1;
}
}
function scrolling() {
if (o.scrollTop % lh != 0) {
o.scrollTop += 1;
if (o.scrollTop >= o.scrollHeight / 2) o.scrollTop = 0;
} else {
clearInterval(t);
setTimeout(start, delay);
}
}
setTimeout(start, delay);
}
startmarquee(25, 20, 2500, 0);
})
</script>
</html>