집 > 기사 > 웹 프론트엔드 > 투명도 그라디언트 effect_javascript 기술을 달성하는 js 메소드

투명도 그라디언트 effect_javascript 기술을 달성하는 js 메소드

WBOY원래의: 2016-05-16 16:05:061717검색

이 기사의 예에서는 js에서 투명도 그라디언트 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

여기서 처음에는 요소의 투명도가 30이라는 것을 알 수 있습니다. 마우스를 위로 이동하면 투명도가 천천히 증가하고 투명도가 100에 도달하면 중지됩니다. 마우스가 바깥쪽으로 이동하면 투명도가 천천히 30으로 감소합니다.

포인트 1: 투명도 값을 직접 얻고 변경할 수 없기 때문에 투명도 값을 변수에 할당하고 변수가 변경되도록 한 다음 마지막으로 변수 값을 요소의 투명도 값에 할당할 수 있습니다.

var alpha=30;

포인트 2: 목표값과 현재 투명도 값을 판단하여 양의 속도인지 음의 속도인지 판단합니다.

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

포인트 3: 투명도 값이 목표 값에 도달하면 타이머를 끄세요. 그렇지 않으면 투명도 값이 계속 변경됩니다. 마지막으로 요소에 값을 할당합니다. 투명성에는 호환성 문제가 있으므로 두 가지 작성 방법이 필요합니다.

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 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：js 간단한 클릭 맨 위로 돌아가기 효과 구현 method_javascript 기술다음 기사：js 간단한 클릭 맨 위로 돌아가기 효과 구현 method_javascript 기술

투명도 그라디언트 effect_javascript 기술을 달성하는 js 메소드

관련 기사