Javascript는 색상 그라데이션 변경 및 그라데이션 효과 code_javascript 기술을 구현합니다.-JS 튜토리얼-php.cn

Javascript는 색상 그라데이션 변경 및 그라데이션 효과 code_javascript 기술을 구현합니다.

WBOY

풀어 주다： 2016-05-16 17:33:10

원래의

1056명이 탐색했습니다.

이 사이트의 탐색 표시줄에 대해 뭔가를 하고 싶습니다. 따라서 저는 탐색 모음 색상의 그라데이션을 변경하기 위해 js를 사용하기로 결정했습니다.
처음에는 불투명도 속성(투명도)을 이용해 색상의 그라데이션을 바꿔볼까 생각도 했습니다. 그러나 문제가 있습니다.
각 내비게이션 라벨은 [li]를 사용합니다. 마우스가 라벨 위에 떠 있을 때 [li]의 className은 onmouseover()를 통해 즉시 변경되며, setInterval()을 사용하여 불투명도를 0에서 1로 변경합니다. , 마우스가 떠났을 때 [li] 태그의 색상을 복원하는 것이 훨씬 더 번거로운 것 같습니다. 그래서 나는 빨리 이 접근 방식을 포기하고 마음을 바꾸었습니다.

바이두에서 검색하다가 http://www.cnblogs.com/cloudgamer/archive/
2009/03/11/color.html에서 좋은 글을 봤습니다. 그 후 단순화가 이루어졌고 해결책이 발견되었습니다.

먼저 "#FFFFFF" 및 "#CCCCCC"와 같은 두 가지 색상 값을 전달하는 것이 좋습니다. 그 중 하나는 시작 색상이고 다른 하나는 종료 색상입니다. 처리를 통해 두 가지 색상이 변할 때 다양한 색상의 문자열을 얻을 수 있으며, 문자열의 수, 즉 획득 빈도를 조정할 수 있습니다. 배열 변수로 돌아가면 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
/* *
* @Desc 이 파일은 색상 그라데이션 변경을 위한 라이브러리입니다 - colorGrad.js 
* @Author GenialX 
* @Date 2013.05.30 
* @QQ 2252065614 
* @URL http: //www.ihuxu.com 
*/ 

/**
* 색상을 변경하는 입력 함수
* BeginColor/endColor는 모두 #FFFFFF 모양의 16진수 문자열이고 rate는 그라데이션의 속도입니다. 
* @return colorArray # 모양의 문자 배열 FFFFFF 문자열 배열
* 호출 형식changeColor("#FFFFFF","#000000",100);*/ 
function getColorArray(bColor,eColor,r){ 
//전환 중인 색상 값, 예: #FFFFFF 
 var curColor = new Object(); 
var startColor = new Object(); 
var endColor = new Object() 
var rate = new Object(); /각 RGB 성장 방향을 가져옵니다. true는 증가를 나타내고, false는 감소를 나타냅니다. 
var isTrue = new Object(); 
var colorArray = new Array() 
var i = 0; //Array subscript 

beginColor = getRGB (bColor);//ogj 유형으로 변경
endColor = getRGB(eColor);//ogj 유형으로 변경
curColor = getRGB(bColor) 
rate = getRate(beginColor,endColor,r) ; 
isTrue = getIsTrue(beginColor,endColor) 