当前位置: 58彩票app下载 > 58彩票网络 > 正文

js运动物体透明度

时间:2019-12-17 14:15来源:58彩票网络
JS运动改动单物体发光度的法子解析,js运动物体发光度 本文实例呈报了JS运动更改单物体折射率的措施。共享给我们供我们仿照效法,具体如下: 而外通过改变物体的宽,高,letf,to

JS运动改动单物体发光度的法子解析,js运动物体发光度

本文实例呈报了JS运动更改单物体折射率的措施。共享给我们供我们仿照效法,具体如下:

而外通过改变物体的 宽,高,letf,top地点照旧是活动方平素得以完毕物体运动效用之外,改造物体的反射率,也是运动特效

<script>
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    oDiv.onmousemove = function () {
      startMove(100);
    }
    oDiv.onmouseout = function () {
      startMove(30);
    }
}
var timer = null;
function startMove(iTarget) {
    clearInterval(timer);
    var oDiv = document.getElementById('div1');
    timer = setInterval(function(){
      if(oDiv.offsetAlpha == iTarget){
        ....
      }
    },30);
}
</script>

唯独在js中独有offsetLeft/Top ,offsetWidth/Height,那多少个办法,并未offsetAlpha那一个办法。

问:那么大家怎么来 获取当前实体的反射率这??

大家得以团结定义二个变量 var 阿尔法  = 30;通过判定这一个变量 是不是和指标值是不是等于,来世襲大家下一步的操作;

var alpha = 30; // 自定义一个变量

当阿尔法 等指标值得时候,清楚电磁打点计时器,不然就改成发光度的值alpha

if(alpha == iTarget){
   clearInterval(timer);
}else{
   alpha += iSpeed;
   oDiv.style.opacity = alpha/100;
   oDiv.style.filter = 'alpha(opacity:'+alpha+')';
}

风华正茂体化的代码如下:

<div id="div1"></div>

css样式部分:

<style>
    #div1{
      width: 100px;height: 100px;
      background: green;
      opacity:0.3;
      filter:alpha(opacity:30);/*兼容低版本IE*/
    }
</style>

js部分:

<script>
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    oDiv.onmousemove = function () {
      startMove(100);
    }
    oDiv.onmouseout = function () {
      startMove(30);
    }
  }
  var timer = null;
  var alpha = 30;
  function startMove(iTarget) {
    clearInterval(timer);
    var oDiv = document.getElementById('div1');
    var iSpeed = 0;
    timer = setInterval(function(){
      if(alpha>iTarget){
        iSpeed = -10;
      }else{
        iSpeed = 10;
      }
      if(alpha == iTarget){
        clearInterval(timer);
      }else{
        alpha += iSpeed;
        oDiv.style.opacity = alpha/100;
        oDiv.style.filter = 'alpha(opacity:'+alpha+')';
      }
    },30);
  }
</script>

更加多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与手艺总计》、《JavaScript动漫特效与才干汇总》、《JavaScript查找算法技巧总括》、《JavaScript数据布局与算法手艺计算》、《JavaScript遍历算法与技能计算》、《JavaScript中json操作技艺计算》、《JavaScript错误与调解技能总计》及《JavaScript数学生运动算用法总括》

企望本文所述对我们JavaScript程序设计具有助于。

本文实例汇报了JS运动改变单物体光滑度的秘诀。分享给我们供我们仿照效法,具体如下...

编辑:58彩票网络 本文来源:js运动物体透明度

关键词: