文本向上滚动

 <div class="company_flex">
                    <div class="con1">
                        <div class="company_box">
                            <img src="./Images/index_07xxxhdpi.png"> 达州市通川区翠屏社区卫生服务中心
                        </div>
                        <div class="company_box">
                            <img src="./Images/index_07xxxhdpi.png"> 达州市通川区朝阳社区卫生服务中心
                        </div>
                        <div class="company_box">
                            <img src="./Images/index_07xxxhdpi.png"> 达州市通川区蒲家中心卫生院
                        </div>
                        <div class="company_box">
                            <img src="./Images/index_07xxxhdpi.png"> 达州市通川区翠屏社区卫生服务中心
                        </div>
                        <div class="company_box">
                            <img src="./Images/index_07xxxhdpi.png"> 达州市通川区罗江中心卫生院
                        </div>
                        <div class="company_box">
                            <img src="./Images/index_07xxxhdpi.png"> 汶川县人民医院体检中心
                        </div>
                        <div class="company_box">
                            <img src="./Images/index_07xxxhdpi.png"> 达州市通川区翠屏社区卫生服务中心
                        </div>
                        <div class="company_box">
                            <img src="./Images/index_07xxxhdpi.png"> 达州市通川区罗江中心卫生院
                        </div>
                        <div class="company_box">
                            <img src="./Images/index_07xxxhdpi.png"> 汶川县人民医院体检中心
                        </div>
                    </div>
                    <div class="con2"></div>
                </div>

CSS:

.company .company_flex{
    width: 100%;
    height: 144px;
    overflow: hidden;
}

.company .company_flex .con1,.con2{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 1%;
}

.company .company_flex .company_box {
    min-width: 30%;
    display: flex;
    align-items: center;
    margin-top: 25px;
}

.company .company_flex .company_box img {
    width: 35px;
    height: 35px;
    margin-right: 20px;
}

js:

var area = document.getElementsByClassName("company_flex");
            console.log('area',area)
            var con1 = document.getElementsByClassName("con1") ;
            var con2 = document.getElementsByClassName("con2") ;
            console.log(con1)
            con2[0].innerHTML = con1[0].innerHTML;

            function scrollUp() {
                console.log(area[0].scrollTop)
                if (area[0].scrollTop >= con1[0].offsetHeight) {
                    area[0].scrollTop = 0;
                } else {
                    area[0].scrollTop++
                }
            }
            var time = 50;
            var mytimer = setInterval(scrollUp, time);
            area.onmouseover = function () {
                clearInterval(mytimer);
            }
            area.onmouseout = function () {
                mytimer = setInterval(scrollUp, time);
            }

猜你喜欢

转载自www.cnblogs.com/Tohold/p/9429437.html