HTML框架 java反射机制 HTTP请求 uitableview session charts swift3 dns jtable Pure CSS vue插件 河南普通话考试 android项目开发 鼠标失去焦点事件 spark算法 git显示所有远程分支 mysql分页查询sql语句 小程序下拉刷新样式 python运行环境 python3基础教程 python配置 python命令行 python输出中文 python安装环境变量 python中的join函数 python加入环境变量 python安装程序 java新特性 数据结构java版 java8函数式接口 java文档 java8时间 java的random jdbc连接mysql java注释规范 linux系统安装教程图解 高效能人士的七个习惯下载 源计划卡特 视频加字幕软件哪个好 ps插入表格
当前位置: 首页 > 学习教程  > 编程语言

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

2020/8/31 15:37:36 文章标签:

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>

三、更多有趣效果

1、GitHub:https://github.com/yongtaozheng/html-css-js-Achieve-cool-results

2、个人博客:http://47.113.84.128:8090/


本文链接: http://www.dtmao.cc/news_show_150381.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?