jQuery는 배경색 그라데이션 애니메이션 효과를 작동합니다.
이번에는 jQuery 연산의 배경색 그라데이션 애니메이션 효과를 가져오겠습니다. jQuery 연산 배경색 그라데이션 애니메이션 효과의 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>背景颜色渐变</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<input id="Button1" type="button" value="button" onclick="tggg()" />
<script>
function tggg() {
//$("#asd").css({ "background-color": "red" }).show().fadeOut(500);
fadeColor(
{ r: 0, g: 255, b: 0 }, //star color
{r: 255, g: 255, b: 255 }, //end color
function (color) { document.getElementById("asd").style.backgroundColor = color; }, 1, 10);
}
//所有代码的执行时间只有24毫秒左右。
function fadeColor(from, to, callback, duration, totalFrames) {
//用一个函数来包裹setTimeout，根据帧数来确定延时
function doTimeout(color, frame) {
setTimeout(function () {
try {
callback(color);
} catch (e) { JSLog.write(e); }
}, (duration * 1000 / totalFrames) * frame);
//总持续秒数/每秒帧数*当前帧数=延时(秒)，再乘以1000作为延时(毫秒)
}
// 整个渐变过程的持续时间，默认为1秒
var duration = duration || 1;
// 总帧数，默认为持续秒数*15帧，也即每秒15帧
var totalFrames = totalFrames || duration * 15; var r, g, b; var frame = 1;
//在第0帧设置起始颜色
doTimeout('rgb(' + from.r + ',' + from.g + ',' + from.b + ')', 0);
//计算每次变化所需要改变的rgb值
while (frame < totalFrames + 1) {
r = Math.ceil(from.r * ((totalFrames - frame) / totalFrames) + to.r * (frame / totalFrames));
g = Math.ceil(from.g * ((totalFrames - frame) / totalFrames) + to.g * (frame / totalFrames));
b = Math.ceil(from.b * ((totalFrames - frame) / totalFrames) + to.b * (frame / totalFrames));
// 调用本frame的doTimeout
doTimeout('rgb(' + r + ',' + g + ',' + b + ')', frame); frame++;
}
}
</script>
<p style="width: 600px; height: 200px; border: 1px solid red;" id="asd">
脚本之家欢迎各位光临--http://www.jb51.net
</p>
</body>
</html>이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
위 내용은 jQuery는 배경색 그라데이션 애니메이션 효과를 작동합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까?
Feb 28, 2024 pm 03:12 PM
jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.
Vivo의 새로운 X100 시리즈 메모리, 색상 노출: 모든 시리즈는 12+256GB부터 시작
May 06, 2024 pm 03:58 PM
5월 6일 뉴스에 따르면, vivo는 새로운 vivo X100 시리즈가 5월 13일 19시에 공식 출시된다고 오늘 공식 발표했습니다. 이번 컨퍼런스에서는 vivoX100s, vivoX100sPro, vivoX100Ultra 등 3가지 모델과 비보가 자체 개발한 이미징 브랜드 BlueImage 블루프린트 이미징 기술이 공개될 것으로 예상된다. 디지털 블로거 '디지털 채팅 스테이션'도 오늘 이 세 가지 모델의 공식 렌더링, 메모리 사양, 색상 매칭을 공개했습니다. 그 중 X100s는 직선형 화면 디자인을 채택한 반면, X100sPro와 X100Ultra는 곡선형 화면 디자인을 채택했습니다. 블로거는 vivoX100s가 블랙, 티타늄, 시안, 화이트 등 4가지 색상으로 출시된다고 밝혔습니다.
jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요.
Feb 28, 2024 pm 09:06 PM
제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. <
jQuery를 사용하여 모든 태그의 텍스트 내용 수정
Feb 28, 2024 pm 05:42 PM
제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.
WPS 문서 테이블의 색상을 설정하는 방법을 알고 계십니까?
Mar 20, 2024 am 08:19 AM
다른 사람의 WPS 문서에서 테이블 색상을 보면 효과가 다채롭고 아름답지만 단조로운 검정색만 있습니다. 테이블을 색깔로 채워야 한다면 많은 학생들이 그렇게 할 것이라고 믿습니다. 그러나 WPS 문서 중국에서 테이블 색상을 설정하려는 경우 많은 학생들이 혼란스러워할 것입니다! 오늘은 WPS 문서 테이블의 색상을 설정하는 방법을 알아 보겠습니다. 모든 사람에게 도움이 되길 바라는 마음으로 문서를 만들었습니다. 단계는 다음과 같습니다. 1. WPS 문서에서 표를 그리고 선 색상을 수정할 표를 마우스 오른쪽 버튼으로 클릭해야 합니다. 2. 다음으로, 표에서 [마우스 오른쪽 버튼]을 클릭하면 나타나는 팝업 메뉴에서 [테두리 및 음영]을 찾습니다. 3. 이때 [테두리 및 음영] 옵션이 열립니다.
jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까?
Feb 28, 2024 am 08:39 AM
jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? 프런트엔드 개발에서는 요소의 높이 속성을 조작해야 하는 경우가 종종 있습니다. 때로는 요소의 높이를 동적으로 변경해야 할 수도 있고 요소의 높이 속성을 제거해야 하는 경우도 있습니다. 이 기사에서는 jQuery를 사용하여 요소의 높이 속성을 제거하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. jQuery를 사용하여 높이 속성을 연산하기 전에 먼저 CSS의 높이 속성을 이해해야 합니다. height 속성은 요소의 높이를 설정하는 데 사용됩니다.
PS 그라디언트 도구 사용 방법 - PS 그라디언트 도구 사용 방법
Mar 05, 2024 pm 06:28 PM
PS 소프트웨어는 사무용으로 많이 사용하는 소프트웨어인데 PS 그라디언트 도구 사용법을 알고 계시나요? 다음은 편집자가 가져온 PS 그라디언트 도구 사용 방법입니다. 아래를 보세요. 1. 새 문서 열기 또는 만들기: 먼저 Photoshop 소프트웨어를 열고 새 문서를 만들거나 기존 이미지 파일을 엽니다. 그라디언트 도구 선택: 도구 모음 왼쪽에서 그라디언트 도구(직사각형 선택 윤곽 도구와 페인트 통 도구 사이)를 찾아 클릭하여 선택합니다. 3. 그라디언트 유형 설정: 도구 옵션 막대에서 다양한 그라디언트 유형을 선택할 수 있습니다. 선형 그래디언트, 방사형 그래디언트, 각도 그래디언트 및 기타 옵션 중에서 선택할 수 있습니다. 그라데이션 유형 드롭다운 메뉴를 클릭하고 원하는 그라데이션 유형을 선택합니다. 4
jQuery에서 eq의 역할 및 적용 시나리오 이해
Feb 28, 2024 pm 01:15 PM
jQuery는 웹 페이지에서 DOM 조작 및 이벤트 처리를 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에서 요소를 선택하는 데 사용됩니다. 구체적인 사용 및 적용 시나리오는 다음과 같습니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에 있는 요소를 선택합니다. 인덱스 위치는 0부터 계산되기 시작합니다. 즉, 첫 번째 요소의 인덱스는 0이고 두 번째 요소의 인덱스는 1입니다. eq() 메소드의 구문은 다음과 같습니다: $("s
