<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/定义向上动画/
@keyframes slideUp{
from{transform:translateY(0)}
to{transform:translateY(-38px)}
}
/通过on 调用动画/
.on{
animation: slideUp 0.5s ease;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>我是春去秋来</li>
<li>只会饮酒寻欢</li>
<li>看过草长莺飞</li>
<li>只知情长纸短</li>
<li>每天悱恻难眠</li>
<li>想着鸿鹄之言</li>
<li>然后自命不凡</li>
<li>自以冯唐恨晚</li>
</ul>
</div>
</body>
<script type="text/javascript">
// 取出 ul 的第一个元素节点 放入到ul的最后面 firstElementChild appendChild
// 每隔3秒做一次 setInterval
var ul =document.querySelector(".container ul");
function ani(){
var first = ul.firstElementChild;
ul.classList.add("on");
setTimeout(function(){
ul.appendChild(first);
ul.classList.remove("on");
},500)
}
var id = setInterval(ani,3000);
//每隔3秒做一次动画
//鼠标放在container 停止动画
var container = document.querySelector(".container");
container.onmousemove = function(){
clearInterval(id);
//停止间隔调用
}
container.onmouseout = function(){
id = setInterval(ani,3000)
}
</script>
</html>
网友评论