前端开发之js基础(8)
程序员文章站
2022-06-30 19:15:10
...
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>
上一篇： 前端开发之js基础(7)
下一篇： 前端开发之js基础（1）