首页 > 代码库 > 多物体中添加透明度的显示
多物体中添加透明度的显示
前面展示了多物体的运动形式，但很常见的针对透明度没有考虑在内，透明度的展示用上述运动框架展示时，需要特别考虑一下，因为透明度是数值，并且有多个值，下面就见要探讨一下这个怎么展现出来：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div { width: 100px;height: 50px;background: red;margin-top: 30px; border: 3px solid black; font-size: 14px;}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName(‘div‘);
var i=0;
for(i=0;i<oDiv.length;i++){
oDiv[i].timer = null; //设置多个定时器，给定时器一个索引值
oDiv[i].onmouseover = function(){
setMove(this,‘opacity‘,100); //为当前的div加上样式
}
oDiv[i].onmouseout = function(){
setMove(this,‘opacity‘,30);
}
}
};
//获取div的宽度，代替offsetWidth,这样边框就不会有影响
function getStyle(obj,arr){ //两个参数，第一个是获取谁的，第二个时什么样式
if(obj.currentStyle){
return obj.currentStyle[arr];
}else{
return getComputedStyle(obj,false)[arr]; //里面有两个参数，第一个是获取谁的，第二个参数不为空就行，后面是获取样式
}
}
function setMove(obj,arr,iTarget){ //设置多个参数,第二个参数为要改变的样式
var timer = null;
clearInterval(obj.timer); //关闭当前的定时器
obj.timer = setInterval(function(){ //为当前div设置定时器
var iCurr=0;
if(arr==‘opacity‘){
//parseFloat()取浮点数
var iCurr = parseInt(parseFloat(getStyle(obj,arr))*100); //透明度单独处理，将小数转换成整数
}else{
var iCurr = parseInt(getStyle(obj,arr)); //这里就是获取的当前div的宽度
}
var iSpeed = (iTarget-iCurr)/15;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //将当前的速度转化成整型值
//Math.ceil向上取整，Math.floor向下取整
if(iCurr==iTarget){
clearInterval(obj.timer); //清除当前div的定时器
}else{
if(arr==‘opacity‘){ //透明度单独处理，就可以适应多物体运动框架
obj.style.fliter = ‘alpha(:‘+(iCurr+iSpeed)+‘)‘; //这里是用整数表示
obj.style.opacity = (iCurr+iSpeed)/100; //这里使用小数表示
}
obj.style[arr]= iCurr+iSpeed+‘px‘; //将div的宽以一定速度增加
}
},30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div>asdf</div>
</body>
</html>
多物体中添加透明度的显示