面試官：來實現(xiàn)一個js上下信息循環(huán)滾動


<!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>泰安市婦幼保健院是泰安市唯一一家三級甲等婦幼保健
                        院，收費與其他醫(yī)院一致，符合收費規(guī)定。此外，泰安市
                        婦幼保健院是醫(yī)保醫(yī)院，與新農(nóng)合、城鎮(zhèn)醫(yī)療保險、國際
                        保險均有合作，符合條件者可按一定比例報銷。
                    </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>先心病患兒的治療方法有很多，治療效果要根據(jù)病情嚴
                        重程度和治療是否及時決定。隨著醫(yī)療技術(shù)的發(fā)展，房間
                        隔缺損、室間隔缺損等簡單先心病基本可恢復(fù)與正常人一
                        樣，而復(fù)雜先心病患者治療及時生活質(zhì)量大大提高。
                    </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>先心病不是一個明確的遺傳性疾病，但具有一定的家族
                        傾向。先天性心臟病可由環(huán)境因素和遺傳因素或兩者共同
                        作用而引起，建議懷孕時做好遺傳咨詢和孕期保健。
                    </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);
    }


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

</html>

 



作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路