面试官:来实现一个js上下信息循环滚动


<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes,viewport-fit=cover">
    <title>title</title>
    <meta name="keywords" content="title" />
    <meta name="description" content="title" />
    <link href="css/css_zsy.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <style>
        .rdwd{
     width: 90%;
     margin: 0 auto;
     margin-top: 1rem;
}
.rdwd_title{
     text-align: center;
     color: #00c8aa;
     font-weight: bold;
     font-size: 0.7rem;
}
.rdwd_box{
    width: 100%;
    height: 10rem;
    overflow-y: auto;
    margin-top:0.5rem;
}
.rdwd_box::-webkit-scrollbar {
    display: none;
}
.rdwd_box01 {
    overflow: hidden;
}

.rdwd_box02 {
    overflow: hidden;
}
.rdwd_box1
{
margin-top:0.5rem;
}
.rdwd_box2{
margin-top:0.5rem;
}
.rdwd_box3{
margin-top:0.5rem;
}
.rdwd_box1 p:nth-child(1){
    color: #fd9c2b;
    margin-bottom:0.2rem;
}
.rdwd_box1 p:nth-child(2) {
    color: #666666;
    text-align: justify;
    font-size: 0.55rem;
}
.rdwd_box2 p:nth-child(1) {
    color: #fd9c2b;
    margin-bottom:0.2rem;
}

.rdwd_box2 p:nth-child(2) {
    color: #666666;
    text-align: justify;
    font-size: 0.55rem;
}
.rdwd_box3 p:nth-child(1) {
    color: #fd9c2b;
    margin-bottom:0.2rem;
}

.rdwd_box3 p:nth-child(2) {
    color: #666666;
    text-align: justify;
    font-size: 0.55rem;
}

    </style>
</head>

<body>
    <!-- 热点问答 -->
    <div class="rdwd">
        <div class="rdwd_title">
            热点问答
        </div>
        <div class="rdwd_box" id="rdwd_box">
            <div class="rdwd_box01" onMouseOut="Up()" onMouseOver="Stop()" id="rdwd_box_1">
                <div class="rdwd_box1">
                    <p><span style="color:#fd9c2b;font-weight:bold;margin-right:0.2rem; ">Q:</span>先天性心脏病治疗费用是多少吗?可以报销吗?</p>
                    <p>
                        <span style="color:#666666;font-weight:bold;margin-right:0.2rem;">A:</span>泰安市妇幼保健院是泰安市唯一一家三级甲等妇幼保健
                        院,收费与其他医院一致,符合收费规定。此外,泰安市
                        妇幼保健院是医保医院,与新农合、城镇医疗保险、国际
                        保险均有合作,符合条件者可按一定比例报销。
                    </p>
                </div>
                <div class="rdwd_box2">
                    <p><span style="color:#fd9c2b;font-weight:bold;margin-right:0.2rem;">Q:</span>先天性心脏病治疗效果如何?</p>
                    <p>
                        <span style="color:#666666;font-weight:bold;margin-right:0.2rem;">A:</span>先心病患儿的治疗方法有很多,治疗效果要根据病情严
                        重程度和治疗是否及时决定。随着医疗技术的发展,房间
                        隔缺损、室间隔缺损等简单先心病基本可恢复与正常人一
                        样,而复杂先心病患者治疗及时生活质量大大提高。
                    </p>
                </div>
                <div class="rdwd_box3">
                    <p><span style="color:#fd9c2b;font-weight:bold;margin-right:0.2rem;">Q:</span>先天性心脏病会遗传吗?</p>
                    <p>
                        <span style="color:#666666;font-weight:bold;margin-right:0.2rem;">A:</span>先心病不是一个明确的遗传性疾病,但具有一定的家族
                        倾向。先天性心脏病可由环境因素和遗传因素或两者共同
                        作用而引起,建议怀孕时做好遗传咨询和孕期保健。
                    </p>
                </div>
            </div>
            <div class="rdwd_box02" id="rdwd_box_2"></div>
        </div>
    </div>
</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/viewport.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<script>
    var box = document.getElementById("rdwd_box");
    var con1 = document.getElementById("rdwd_box_1");
    var con2 = document.getElementById("rdwd_box_2");
    var speed = 100;
    console.log(con1.innerHTML)
    con2.innerHTML = con1.innerHTML;

    function ScrollUp() {
        if (box.scrollTop >= con1.scrollHeight) {
            box.scrollTop = 0;
        } else
            box.scrollTop++;
    }
    var i = setInterval("ScrollUp()", speed);

    function Stop() {
        clearInterval(i);
    }

    function Up() {
        i = setInterval("ScrollUp()", speed);
    }


// 适应iphonex
// ********************************************************************************
if ($(window).width() === 375 && $(window).height() === 812 && window.devicePixelRatio === 3) {
    $("body").css("padding-bottom", "34px");
}
// ************************************************************************************
</script>

</html>

 



作者:Vam的金豆之路

主要领域:前端开发

我的微信:maomin9761

微信公众号:前端历劫之路