jQuery+css는 눈부신 동적 블록 드리프트 효과를 달성합니다._jquery
이 글의 예시는 jQuery+css로 구현한 동적 블록 드리프트 효과를 설명합니다. 자세한 내용은 다음과 같습니다.
런닝 효과 스크린샷은 다음과 같습니다.
구체적인 코드는 다음과 같습니다.
<!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>
<title></title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" >
function createColor() {
var color = [];
for (var i = 0; i < 3; i++) {
color.push(Math.round(Math.random() * 256));
}
return "rgb(" + color.join(",") + ")"
}
function createRect(left, top, index) {
var width = Math.round(Math.random() * 150) + 10;
var height = Math.round(Math.random() * 150) + 10;
left = left > width ? left - width : left;
top = top > height ? top - height : top;
var html = [];
html.push('<div id="rect_'+index+'" class="rect shadow radius" style="background:');
html.push(createColor());
html.push(';left:');
html.push(left);
html.push('px;top:');
html.push(top);
html.push('px;width:');
html.push(width);
html.push('px; height:');
html.push(height);
html.push('px;"></div>');
return html.join("");
}
function initRect() {
var body = $("#body");
var width = body.width();
var height = body.height();
var index = new Date().getTime();
body.append(createRect(Math.round(Math.random() * width), Math.round(Math.random() * height), index));
setAnimate(index, height);
}
function setAnimate(index, height) {
var rect = $("#rect_" + index);
var top = parseInt(rect.position().top);
var selfHeight = rect.height();
if (top > height - selfHeight) {
rect.remove();
initRect();
} else {
var filter = top / height;
rect.css({ "top": (top + 5) + "px", "opacity": filter });
setTimeout(function () {
setAnimate(index, height);
}, 33);
}
}
function initAllRect() {
for (var i = 0; i < 20; i++) {
initRect();
}
}
$(document).ready(function () {
initAllRect();
});
</script>
<style type="text/css" >
.rect {
background:#DDDDDD;
width:100px;
height:100px;
position:absolute;
}
.radius
{
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
.shadow
{
-moz-box-shadow:-5px -5px 5px #999 inset;
-webkit-box-shadow:-5px -5px 5px #999 inset;
box-shadow:-5px -5px 5px #999 inset;
}
#body { height:700px; width:100%; background:black; margin:0; }
</style>
</head>
<body>
<div id="body" class="shadow radius">
</div>
</body>
</html>
더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "jQuery 애니메이션 및 특수 효과 사용 요약" 및 "일반적인 클래식 특수 효과 요약"을 확인할 수 있습니다. jQuery"
이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7405
15
1630
14
1358
52
1268
25
1218
29
H5 페이지 생산에는 지속적인 유지 보수가 필요합니까?
Apr 05, 2025 pm 11:27 PM
코드 취약점, 브라우저 호환성, 성능 최적화, 보안 업데이트 및 사용자 경험 개선과 같은 요소로 인해 H5 페이지를 지속적으로 유지해야합니다. 효과적인 유지 관리 방법에는 완전한 테스트 시스템 설정, 버전 제어 도구 사용, 페이지 성능을 정기적으로 모니터링하고 사용자 피드백 수집 및 유지 관리 계획을 수립하는 것이 포함됩니다.
CSS를 통해 일류 이름 항목으로 자식 요소를 선택하는 방법은 무엇입니까?
Apr 05, 2025 pm 11:24 PM
요소 수가 고정되지 않은 경우 CSS를 통해 지정된 클래스 이름의 첫 번째 자식 요소를 선택하는 방법. HTML 구조를 처리 할 때 종종 다른 요소를 만듭니다 ...
H5로 진행률 표시 줄을 만드는 방법
Apr 06, 2025 pm 12:09 PM
HTML5 또는 CSS를 사용하여 진행률 표시 줄을 만듭니다. 진행률 표시 줄 컨테이너를 만듭니다. 진행률 막대 너비를 설정하십시오. 진행률 표시 줄의 내부 요소를 만듭니다. 진행률 표시 줄의 내부 요소 너비를 설정합니다. JavaScript, CSS 또는 Progress Bar 라이브러리를 사용하여 진행 상황을 표시하십시오.
H5 페이지 제작에 적합한 응용 프로그램 시나리오
Apr 05, 2025 pm 11:36 PM
H5 (HTML5)는 마케팅 캠페인 페이지, 제품 디스플레이 페이지 및 기업 프로모션 마이크로 웨스 사이트와 같은 가벼운 응용 프로그램에 적합합니다. 그것의 장점은 교차 성형 및 풍부한 상호 작용에있어 있지만, 그 한계는 복잡한 상호 작용 및 애니메이션, 로컬 리소스 액세스 및 오프라인 기능에 있습니다.
H5 프로젝트를 실행하는 방법
Apr 06, 2025 pm 12:21 PM
H5 프로젝트를 실행하려면 다음 단계가 필요합니다. Web Server, Node.js, 개발 도구 등과 같은 필요한 도구 설치. 개발 환경 구축, 프로젝트 폴더 작성, 프로젝트 초기화 및 코드 작성. 개발 서버를 시작하고 명령 줄을 사용하여 명령을 실행하십시오. 브라우저에서 프로젝트를 미리보고 개발 서버 URL을 입력하십시오. 프로젝트 게시, 코드 최적화, 프로젝트 배포 및 웹 서버 구성을 설정하십시오.
H5 페이지 제작은 프론트 엔드 개발입니까?
Apr 05, 2025 pm 11:42 PM
예, H5 페이지 제작은 HTML, CSS 및 JavaScript와 같은 핵심 기술을 포함하는 프론트 엔드 개발을위한 중요한 구현 방법입니다. 개발자는 & lt; canvas & gt; 그래픽을 그리거나 상호 작용 동작을 제어하기 위해 JavaScript를 사용하는 태그.
H5 호환성 문제를 해결하는 방법
Apr 06, 2025 pm 12:36 PM
H5 호환성 문제에 대한 솔루션에는 다음이 포함됩니다. 웹 페이지가 화면 크기에 따라 레이아웃을 조정할 수있는 반응 형 디자인을 사용합니다. 릴리스 전에 호환성을 테스트하기 위해 브라우저 크로스 브라우저 테스트 도구를 사용하십시오. PolyFill을 사용하여 이전 브라우저의 새로운 API를 지원합니다. 웹 표준을 따르고 효과적인 코드 및 모범 사례를 사용하십시오. CSS 프리 프로세서를 사용하여 CSS 코드를 단순화하고 가독성을 향상시킵니다. 이미지를 최적화하고 웹 페이지 크기를 줄이며로드 속도를 높이십시오. HTTPS를 통해 웹 사이트의 보안을 보장하십시오.
H5를 만드는 방법 아이콘을 클릭하십시오
Apr 06, 2025 pm 12:15 PM
H5 클릭 아이콘을 생성하는 단계에는 다음이 포함됩니다. 이미지 편집 소프트웨어에서 정사각형 소스 이미지 준비. H5 편집기에 상호 작용을 추가하고 클릭 이벤트를 설정하십시오. 전체 아이콘을 덮는 핫스팟을 만듭니다. 페이지로 점프하거나 애니메이션 트리거링과 같은 클릭 이벤트의 동작을 설정하십시오. h5 문서를 HTML, CSS 및 JavaScript 파일로 내보내십시오. 내보내는 파일을 웹 사이트 또는 기타 플랫폼에 배포하십시오.
