前端js实现透明度动画效果的代码教程
程序员文章站
2023-02-23 12:55:19
这个效果的实现和我的上一篇博客一样，主要还是应用setinterval(fun(),milltime); 其中fun() 是每隔milltime毫秒要执行的函数。
这个效果的实现和我的上一篇博客一样，主要还是应用setinterval(fun(),milltime); 其中fun() 是每隔milltime毫秒要执行的函数。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>透明度动画</title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#p1{
width: 200px;
height: 200px;
background-color: red;
opacity: 0.3;
filter: alpha(opacity=30);
}
</style>
<body>
<p id="p1">
</p>
</body>
<script type="text/javascript">
var p1 = document.getelementbyid("p1");
p1.onmouseover = function(){
startmove(100);
}
p1.onmouseout = function(){
startmove(30);
}
var timer = null;
var alpha = 30;
var startmove = function(itarget){
clearinterval(timer);
var speed = 0;
if(itarget > alpha){
speed = 5;
}else {
speed = -5;
}
timer = setinterval(function(){
if(alpha == itarget){
clearinterval(timer);
}else {
alpha += speed;
p1.style.filter = 'alpha(opacity='+ alpha + ')';
p1.style.opacity = alpha/100;
}
},30);
}
</script>
</html> 上一篇： 苹果开心：Apple Music在安卓平台下载量暴增
下一篇： jquery实现拖动效果（代码分享）