面试官：来实现一个js上下信息循环滚动-阿里云开发者社区

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

2022-05-05 116

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 面试官：来实现一个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>

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景