一行文字或多行文字自动向下滚动

最新推荐文章于 2021-10-16 17:12:31 发布

HqL丶1024

最新推荐文章于 2021-10-16 17:12:31 发布

阅读量459

点赞数 3

分类专栏： Vue.js JavaScript jQuery 文章标签： css html vue.js

本文链接：https://blog.csdn.net/hql1024/article/details/103509326

版权

Vue.js 同时被 3 个专栏收录

78 篇文章 8 订阅

订阅专栏

JavaScript

58 篇文章 3 订阅

订阅专栏

jQuery

28 篇文章 0 订阅

订阅专栏

小程序版本(弹幕形式)

在这里插入图片描述

<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;
    /* 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: -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 class="textbox" id="marqueebox0">-->
            <!--                <ul>-->
            <!--                    <li v-for="(item,index) in lists" :key="index">{{item.text}}</li>-->
            <!--                </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);
        //文本滚动end

    })
</script>
</html>