菜单

js达成反射率渐变效果的办法

2019年7月20日 - XML

本文实例叙述了js完结光滑度渐变效果的措施。分享给我们供我们参谋。具体深入分析如下:

js完结反射率渐变效果的法子,js达成发光度渐变

正文实例陈说了js达成发光度渐变效果的秘诀。分享给我们供大家参照他事他说加以考察。具体剖析如下:

此处可达成一始发成分的反射率是30,鼠标移上的时候,反射率稳步增添,到发光度100休息。鼠标移出,光滑度稳步回退,收缩到30的功能。

要点一:因为不可能直接拿走和改造折射率的值,能够把反射率值赋给二个变量,让变量变化,最后把变量的值再赋给成分的透明值。

var alpha=30;

要点二:判别指标值和当前透明值,来决断是正向速度还是负向速度。

if(target > alpha){
speed = 2;
}else{
speed = -2;
}

要点三:假使透明值达到指标值,关掉计时器,否则透明值继续变化。最终把值赋给成分,因为光滑度有包容难题,所以要写上多个写法。

if(alpha == target){
clearInterval(timer);
}
else{
alpha = alpha + speed;
run.style.filter = 'alpha(opacity='+alpha+')';
run.style.opacity = alpha/100;
document.title = alpha;
}

最后,上代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<style>
body{margin:0; padding:0;}
#run{width:100px; height:100px; background:#06c;
position:absolute; border:1px solid #000;
opacity:0.3; filter:alpha(opacity=30);}
</style>
<script>
window.onload = function(){
 var run = document.getElementById("run");
 var btn = document.getElementById("btn");
 var speed = 1;
 var timer = null;
 var alpha=30;
 run.onmouseover = function(){
  startrun(100);
 }
 run.onmouseout = function(){
  startrun(30);
 }
 function startrun(target){
  clearInterval(timer);
  timer = setInterval(function(){
   if(target > alpha){
    speed = 2;
   }else{
    speed = -2;
   }
   if(alpha == target){
    clearInterval(timer);
   }
   else{
    alpha = alpha + speed;
    run.style.filter = 'alpha(opacity='+alpha+')';
    run.style.opacity = alpha/100;
    document.title = alpha;
   }
  },30)
 }
}
</script>
</head>
<body>
<div id="run"></div>
</body>
</html>

梦想本文所述对我们的javascript程序设计有着帮忙。

http://www.bkjia.com/Javascript/981814.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/981814.htmlTechArticlejs实现透明度渐变效果的方法,js实现透明度渐变
本文实例陈诉了js实现发光度渐变效果的秘籍。分享给大家供大家参照他事他说加以考察。具体剖析如下:…

那边可完成一始发成分的折射率是30,鼠标移上的时候,折射率慢慢增添,到反射率100停息。鼠标移出,发光度慢慢降低,收缩到30的功用。

要点一:因为不可能直接拿走和改动折射率的值,能够把折射率值赋给一个变量,让变量变化,最终把变量的值再赋给成分的透明值。

var alpha=30;

要点二:判断目的值和这段日子透明值,来决断是正向速度依旧负向速度。

if(target > alpha){
speed = 2;
}else{
speed = -2;
}

要点三:要是透明值达到指标值,关掉反应计时器,不然透明值继续变化。最终把值赋给成分,因为光滑度有包容难题,所以要写上多个写法。

if(alpha == target){
clearInterval(timer);
}
else{
alpha = alpha + speed;
run.style.filter = 'alpha(opacity='+alpha+')';
run.style.opacity = alpha/100;
document.title = alpha;
}

最后,上代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<style>
body{margin:0; padding:0;}
#run{width:100px; height:100px; background:#06c;
position:absolute; border:1px solid #000;
opacity:0.3; filter:alpha(opacity=30);}
</style>
<script>
window.onload = function(){
 var run = document.getElementById("run");
 var btn = document.getElementById("btn");
 var speed = 1;
 var timer = null;
 var alpha=30;
 run.onmouseover = function(){
  startrun(100);
 }
 run.onmouseout = function(){
  startrun(30);
 }
 function startrun(target){
  clearInterval(timer);
  timer = setInterval(function(){
   if(target > alpha){
    speed = 2;
   }else{
    speed = -2;
   }
   if(alpha == target){
    clearInterval(timer);
   }
   else{
    alpha = alpha + speed;
    run.style.filter = 'alpha(opacity='+alpha+')';
    run.style.opacity = alpha/100;
    document.title = alpha;
   }
  },30)
 }
}
</script>
</head>
<body>
<div id="run"></div>
</body>
</html>

企望本文所述对大家的javascript程序设计有所补助。

您恐怕感兴趣的篇章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图