版权声明：版权所有，如需引用，请注明出处！ https://blog.csdn.net/DHRMM999/article/details/82468117
js缓冲动画
<html>
<head>
<meta charset="UTF-8">
<title>缓冲动画</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<button id="btn">缓冲动画</button>
<div></div>
</body>
<script type="text/javascript">
var btn = document.getElementById("btn");
var div = document.getElementsByTagName("div")[0];
var n = 500;
console.log(div.offsetLeft)
btn.onclick = function(){
var timer = setInterval(function(){
div.style.left = div.offsetLeft+(n-div.offsetLeft)/10+"px";
},50);
}
</script>
</html>js匀速动画
<html>
<head>
<meta charset="UTF-8">
<title>匀速动画</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: pink;
position: relative;
left: 10px;
}
</style>
</head>
<body>
<button id="btn">匀速动画</button>
<div id="box">
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function(){
var timer = setInterval(function(){
box.style.left = box.offsetLeft+5+"px";
if(box.offsetLeft>=400){
clearInterval(timer);
}
},50);
}
</script>
</html>js闪现动画
<html>
<head>
<meta charset="UTF-8">
<title>js闪现动画</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: pink;
position: relative;
left: 10px;
}
</style>
</head>
<body>
<button id="btn">闪现动画</button>
<div id="box">
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function(){
box.style.left = "500px";
}
</script>
</html>