2020广州4399秋招笔试试题--获奖名单轮播效果-阿里云开发者社区

2020广州4399秋招笔试试题--获奖名单轮播效果

2023-11-09 42

版权

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

简介： 2020广州4399秋招笔试试题--获奖名单轮播效果

2020广州4399秋招前端笔试试题–获奖名单轮播效果

一、效果图

获奖名单循环轮播，鼠标经过时停止动画，移出时继续。

二、代码实现

1、html

<body>
    <div id="main">
        <ul id="container1" class="contain"></ul>
        <ul id="container2" class="contain"></ul>
    </div>
</body>

2、CSS

<style type="text/css">
    #main{
        background-color: #EE6A50;
        width: 30vw;
        height: 30vh;
        position: absolute;
        right: 30vw;
        bottom: 60vh;
        opacity: 0.5;
        overflow: hidden;
    }
    .show{
        top: -36vh;
        position: relative;
        text-align: center;
        margin-top: 5vh;
        line-height: 4vh;
        animation: move 5S linear infinite;
        z-index: 0;
        animation-play-state:running;
    }
    @keyframes move{
        from{
            bottom: 0;
        }
        to{
            top:0;
        }
    }
</style>

3、JS

<script type="text/javascript">
    //轮播内容
    var showData = ["恭喜张三获得奖励华为P40一部","恭喜李四获得奖励奔驰一辆","恭喜王五获得奖励加班一天",
                    "恭喜赵六获得奖励放假一天"];
    var main = document.getElementById("main");
    var container1 = document.getElementById("container1");
    var container2 = document.getElementById("container2");
    var show = document.getElementsByClassName("show");
    for(var i = 0;i<showData.length;i++){
        var newNode = document.createElement("li");
        newNode.id = "inf" + i;
        newNode.className = "show";
        newNode.innerText = showData[i];
        container1.appendChild(newNode);
    }
    for(var i = 0;i<showData.length;i++){
        var newNode = document.createElement("li");
        newNode.id = "inf" + (i + 4);
        newNode.className = "show";
        newNode.innerText = showData[i];
        container2.appendChild(newNode);
    }
  //鼠标移入
    main.addEventListener("mousemove",function(){
        for(i = 0;i < show.length;i++){
            show[i].style.animationPlayState = "paused";
        }
    },false);
  //鼠标移出
    main.addEventListener('mouseleave',function(){
        for(i = 0;i < show.length;i++){
            show[i].style.animationPlayState = "running";
        }
    },false);
</script>