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/