js动画实现透明度动画
2024-08-25 14:30:07
在本次实例中,由于一般主流的浏览器对于透明度opacity最大值为1,但是在IE6最大值是100,此次例子是按主流浏览器的透明度来算的,所以定义的是小数,也可以定义为整数为单位,在运算的时候遇到主流的浏览器除以100就可以了。
实例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>透明度动画</title>
<style>
body,div{
margin:0;
padding:0;
}
.opacity_move{
height:200px;
width:200px;
background:#936;
opacity:0.3;
}
</style>
<script>
window.onload = function (){
var div = document.getElementById('opacity_move');
div.onmouseover = function (){
opacity_move(0.1, 1);
}
div.onmouseout = function (){
opacity_move(-0.1, 0.3);
}
}
var timer = null;
var opacity = 0.3;
function opacity_move(speed, target){
var div = document.getElementById('opacity_move');
clearInterval(timer);
timer = setInterval(function(){
if(opacity.toFixed(1) == target){//浮点数之间的运算存在误差,会有很多位的小数,所以在判断是否等于一时需要四舍五入来计算,并且保留一位小数。
clearInterval(timer);
}
else{
opacity += speed;
div.style.filter = 'alpha(opacity:' + opacity + ')';
div.style.opacity = opacity;
}
}, 500);
}
</script>
</head> <body>
<div id="opacity_move" class="opacity_move"></div>
</body>
</html>
动画总结:
1.先设置一个定时器;
var timer = null;
2.清空定时器;
clrarInterval(timer);
3.打开定时器,并写功能;
timer = setInterval(function(){
/*功能*/
},1000);
4.判断相应条件关闭定时器。
timer = setInterval(function(){
if(/*条件*/){
clrarInterval(timer);
}
else{
/*功能*/
}
},1000);
最新文章
- Python导出Excel为Lua/Json/Xml实例教程(一):初识Python
- IOS静态库
- ping命令脚本实现显示网络状态、学生姓名、学号
- 浅析Hadoop文件格式
- android view holder 优化
- VC中监测程序运行时间(二)-毫秒级
- 合并js文件minify实例
- C语言动态生成二维数组
- 【OpenCV-Python】Python Extension Packages for Windows
- tableview cell添加3D动画
- SpirngMVC入门第一天
- Unity学习资料
- BMP 转 YUV (BMP2YUV)
- Android UI之View的加载机制(二)
- php换行和<;br />;互转
- vue2.0阻止事件冒泡
- Unity之配置转换工具
- Failed to register: Error: fabric-ca request register failed with errors [[{";code";:0,";message";:";No identity type provided. Please provide identity type";}]]解决方案
- Spring MVC 底层原理
- 手脱PEtite v2.1