美文网首页
透明度运动测试

透明度运动测试

作者: Jadon7 | 来源:发表于2018-10-21 20:55 被阅读0次
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script>

    //获取非行内元素的样式
    function getStyle(obj,name){
        if (obj.currentStyle) {
            return obj.currentStyle[name];
        } else {
            return getComputedStyle(obj,false)[name];
        }
        
    }

    //通用函数
    function startMover(acr,sx,iTaget){
        clearInterval(acr.timer);
        acr.timer=setInterval(function(){
            var oDivSx=0;
            if (sx=='opacity') {
                oDivSx=parseFloat(getStyle(acr,sx))*100;
            } else {
                oDivSx=parseInt(getStyle(acr,sx));
            }
            var spead=0;
            spead=(iTaget-oDivSx/100)/3;
            spead=spead>0?Math.ceil(spead):Math.floor(spead);
            if (oDivSx==iTaget) {
                clearInterval(acr.timer);
            }else{
                if(sx=='opacity'){
                    acr.style.filter='alpha(opcity:'+(oDivSx+spead)+')';
                    acr.style.opacity=(oDivSx+spead)/100;
                }else{
                    acr.style[sx]=oDivSx+spead+'px';
                }
            }
        },17)
    }
    
    //调取
    window.onload=function(){
        var oDiv=document.getElementById('div1');
        oDiv.onmousemove=function(){
            startMover(this,'opacity',0.3)
        }
    }
    
</script>
<style>
    #div1{
        width: 200px;
        height: 200px;
        background: green;
        opacity: 1;
        filter: alpha(opacity:1);
    }
</style>
<body>
    <div id="div1"></div>
</body>
</html>

相关文章

  • 透明度运动测试

  • 【Unity Shader入门精要学习】透明(二)

    透明度测试 透明度测试原理 它采用一种极端霸道的机制,只要一个片元透明度不满足条件(通常是小于某个阀值),那么他对...

  • 【Unity Shader入门精要学习】透明(六)

    双面渲染的透明效果 透明度测试的双面渲染透明效果 因为透明度测试没有关深度写入,所以这个透明物体的像素级别的深度信...

  • Shader-透明效果-透明度混合

    透明度混合相较于透明度测试更加复杂一些,透明度混合可以得到真正的半透明效果,使用当前片元和透明度作为混合因子,与已...

  • Unity Shader - 消融效果原理与变体

    基本原理与实现 主要使用噪声和透明度测试,从噪声图中读取某个通道的值,然后使用该值进行透明度测试。主要代码如下: ...

  • URP透明效果

    URP透明效果 该节我们会实现URP下透明度测试、透明度混合和开启深度写入的透明度混合效果 本系列URP不再阐述具...

  • Ⅲ透明效果

    透明效果 前言 Unity中通常使用两种方法来实现透明 :透明度测试(AlphaTest)和透明度混合(Alpha...

  • 使用Stencil对相同材质的重合透明物体的透明度进行不叠加处理

    最近在做透明度测试时,突发奇想:具有透明度的物体如何遮挡跟它有相同材质的物体呢?或者是如何让半透明物体重合时透明度...

  • 消融效果

    GitHub项目地址 消融的原理:噪声纹理+clip透明度测试(1)噪声纹理实现随机性(2)clip函数实现透明度...

  • Shader-模板测试

    模板测试 模板测试在透明度测试之后,在深度测试之前 使用模板缓冲区最重要的两个值:当前模板缓冲值(stencilB...

网友评论

      本文标题:透明度运动测试

      本文链接:https://www.haomeiwen.com/subject/prjizftx.html