多物体中添加透明度的显示

Posted 愚小子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了多物体中添加透明度的显示相关的知识,希望对你有一定的参考价值。

  前面展示了多物体的运动形式,但很常见的针对透明度没有考虑在内,透明度的展示用上述运动框架展示时,需要特别考虑一下,因为透明度是数值,并且有多个值,下面就见要探讨一下这个怎么展现出来:

 

<!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>

以上是关于多物体中添加透明度的显示的主要内容,如果未能解决你的问题,请参考以下文章

ue4 角色或物体被遮挡半透明渲染显示

ue4 角色或物体被遮挡半透明渲染显示

ue4 角色或物体被遮挡半透明渲染显示

多物体多种样式的运动简略分析

翻译11 Unity 透明渲染

慕课网javascript动画特效 多透明度 源代码