html5 구현 된 이미지 무제한 폭포 흐름 효과의 하중 경계 둥근 그림자

저자：Eve Cole 업데이트 시간：2025-05-12 11:48:02

댓글 : 웹 페이지 폭포 흐름 효과는 무제한의 그림을 얻을 수 있습니다. 오늘날 인기있는 HTML5 기술을 기반으로하는 폭포 흐름을 실현하는 것 외에도 CSS5 이미지 수정 효과는 그림의 둥근 코너 테두리, 그림 그림자의 3 차원 효과 등과 같은 추가됩니다.

또 다른 웹 페이지 폭포 흐름 효과는 이미지의 무제한로드를 달성 할 수 있습니다. 오늘날 인기있는 HTML5 기술을 기반으로 작성된 시연 페이지에서 총 7 장의 사진이 호출됩니다. 시연의 편의를 위해 스크롤 막대가 스크롤하여 자동으로 표시되므로 모든 사람이 폭포 흐름의 영향을 더 명확하게 볼 수 있습니다. 폭포 흐름을 실현하는 것 외에도, 그림의 둥근 코너 경계, 그림의 3 차원 효과 등과 같은 CSS5의 그림 수정 효과는 폭포 흐름을 배우는 데 좋은 재료입니다.

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<헤드>

<title> jQuery Unlimited 하중 폭포 흐름 </title>

<스타일 유형 = "텍스트/CSS">

/* 태그 재정의*/

Body {패딩 : 0; 마진 : 0; 배경 : #ddd URL (/jscss/demoimg/201312/BG55.jpg) 반복;}

img {국경 : 없음;}

a {텍스트 결정 : 없음; 색상 :#444;}

A : 호버 {색상 :#999;}

#Title {너비 : 600px; 마진 : 20px 자동; 텍스트-정렬 : 중심;}

/* 키 프레임 정의*/

@-webkit-keyframes Shade {

{불투명도 : 1;}에서

15%{불투명 : 0.4;}

{불투명도 : 1;}

}

@-moz-keyframes shade {

{불투명도 : 1;}에서

15%{불투명 : 0.4;}

{불투명도 : 1;}

}

@-ms-keyframes shade {

{불투명도 : 1;}에서

15%{불투명 : 0.4;}

{불투명도 : 1;}

}

@-o-keyframes shade {

{불투명도 : 1;}에서

15%{불투명 : 0.4;}

{불투명도 : 1;}

}

@keyframes Shade {

{불투명도 : 1;}에서

15%{불투명 : 0.4;}

{불투명도 : 1;}

}

/* 포장하다 */

#wrap {너비 : 자동; 높이 : 자동; 마진 : 0 자동; 위치 : 상대;}

#wrap .box {너비 : 280px; 높이 : 자동; 패딩 : 10px; 테두리 : 없음; float : 왼쪽;}

#wrap .box .info {너비 : 280px; 높이 : 자동; Border-Radius : 8px; Box-Shadow : 0 0 11px #666; 배경 : #fff;}

#wrap .box .info .pic {너비 : 260px; 높이 : 자동; 마진 : 0 자동; 패딩 탑 : 10px;}

#wrap .box .info .pic : hover {

-webkit- 애니메이션 : Grade 3s Ease-in-out 1;

-Moz-Animation : Grade 3s Ease-in-out 1;

-ms-animation : 그늘 3s 편의-인 아웃 1;

-o-animation : 그늘 3s의 편안함 1;

애니메이션 : Shade 3s Ease-in-out 1;

}

#wrap .box .info .pic img {너비 : 260px; Border-Radius : 3px;}

#wrap .box .info .title {너비 : 260px; 높이 : 40px; 마진; 마진 : 0 Auto; 라인-리이트 : 40px; 텍스트-정렬 : 중심; 색상 :#666; 글꼴 크기 : 18px; font-weight : bold; 오버 플로우 : 숨겨진;}

</스타일>

Window.onload = function () {

// 폭포 흐름의 주요 기능을 실행합니다

pbl ( '랩', '박스');

// 시뮬레이션 데이터

var data = [{ 'src': '1.jpg', 'title': 'image title'}, { 'src': '2.jpg', 'title': 'image title'}, { 'src': '3.jpg', 'title': 'image title'}, { 'src': '4.jpg', '제목': '이미지' Title '}, {'src ':'5.jpg ','title ':'image title '}, {'src ':'6.jpg ','title ':'image title '}, {'src ':'7.jpg ','title ':'image title '}];

// 스크롤로드를 설정합니다

window.onscroll = function () {

// 데이터 요청을 계산합니다

if (getcheck ()) {

var wrap = document.getElementById ( '랩');

(데이터의 i) {

// 상자를 만듭니다

var box = document.createelement ( 'div');

box.classname = 'box';

랩. AppendChild (Box);

// 정보를 만듭니다

var info = document.createelement ( 'div');

info.className = 'info';

Box.AppendChild (정보);

// 그림을 만듭니다

var pic = document.createelement ( 'div');

pic.classname = 'pic';

info.AppendChild (PIC);

// IMG 작성

var img = document.createElement ( 'IMG');

img.src = '/jscss/demoimg/201312/'+data] .src;

img.style.height = 'Auto';

pic.appendChild (IMG);

// 제목을 만듭니다

var

});

$ (box) .stop (). 애니메이션 ({{

"불투명": "1"

}, 999);

getStartnum = index; // 요청 된 데이터 수를 업데이트합니다

}

</스크립트>

</head>

<body>

<섹션>

<H2> 폭포 흐름 효과 학습 </h2> 미소.

</섹션>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>