• 文本向上滚动


     <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{
         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- 30%;
        display: flex;
        align-items: center;
        margin-top: 25px;
    }
    
    .company .company_flex .company_box img {
         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);
                }
  • 相关阅读:
    linux下inotifytools+rsync进行文件同步的使用
    进程间的通讯(IPC)方式
    is_writable的php实现
    PHP IPC函数介绍消息队列
    PHP实现多进程并行执行脚本
    PHP IPC函数介绍共享内存
    不同语言从shell管道获取数据的方法
    解决phpredis 'RedisException' with message 'read error on connection'
    beanstalkd的安装
    haproxy对redis进行负载均衡
  • 原文地址:https://www.cnblogs.com/Tohold/p/9429437.html
Copyright © 2020-2023  润新知