您的位置：首页 > Web前端 > CSS

原生JS实现CSS动画效果

2017-04-17 00:00 926 查看

摘要: 使用setTimeout()和setInterval()重复调用函数来修改元素的内联样式达到目的，当然也可以用库（例如jQuery）设计，甚至是CSS3的transition或者animate达到目的

shake()将元素从一边到另一边快速移动或震动，fadeOut()通过指定的时间（默认为500毫秒）降低元素的透明度，使得元素淡出和消失。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>js实现动画</title>
<style type="text/css">
button{
margin-left: 50px;
}
</style>
</head>
<body>
<button onclick="shake(this,fadeOut);">shake and fade</button>
<script type="text/javascript">
function shake(e,oncompleteFun,distance,time){
if(typeof e ==='string')
e=document.getElementById(e);
if(!distance) distance=20;
if(!time) time=500;

var originalStyle=e.style.cssText;
e.style.position='relative';
var start=(new Date()).getTime();
animate();
function animate(){
var now=(new Date()).getTime();
var elapsed=now-start;
var fraction = elapsed/time;
if(fraction<1){
var x=distance*Math.sin(fraction*4*Math.PI);
console.log('x='+x);
e.style.left=x+'px';
setTimeout(animate,Math.min(25,time-elapsed));
}else{
e.style.cssText=originalStyle;
if(oncompleteFun) oncompleteFun(e);
}
}
}
function fadeOut(e,oncompleteFun,time){
if(typeof e ==='string')
e=document.getElementById(e);
if(!time) time=500;

var ease=Math.sqrt;

var start=(new Date()).getTime();
animate();

function animate(){
var elapsed=(new Date()).getTime()-start;
var fraction = elapsed/time;
if(fraction<1){
var opacity = 1-ease(fraction);
e.style.opacity=String(opacity);
setTimeout(animate,Math.min(25,time-elapsed));
}else{
e.style.opacity='0';
if(oncompleteFun) oncompleteFun(e);
}
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JS 动画 shake fadeout

相关文章推荐

新的分享

章节导航