온라인 비디오 설명에 따라 실현 한 사진 벽 렌더링을 소개하겠습니다.
최종 효과는 다음과 같습니다.
• 사진이 클릭되면 사진이 중간 영역으로 이동하여 확대됩니다. 그림이 클릭되면 앞면과 뒷면이 표시되도록 전환됩니다.
• 특정 이미지를 클릭하면 모든 이미지의 위치가 무작위로 재정렬됩니다.
• 제어 버튼을 클릭하면 해당 사진이 중간에 표시되고 제어 버튼이 해당 스타일을 변경합니다. 제어 버튼을 연속적으로 클릭하면 버튼 클릭으로 사진이 전면과 후면을 전환합니다.
아래 그림과 같이 전체 효과의 VCD 분해 :
컴퓨터가 이해할 수있는 방식으로 사례를 분해합니다.
• 비전보기 : HTML + CSS 기본 인터페이스 템플릿
• 컨트롤러 : JavaScript 컨텐츠 처리, 이벤트 처리
• 데이터 데이터 : Data.js는 필요하지 않으며 이해를 돕습니다
데이터 데이터는 매우 일반적으로 사용됩니다. 컨텐츠를보기, 즉 HTML에 작성하는 경우 컨텐츠를 변경하려면 HTML을 수정해야하지만 VCD를 사용하는 경우 데이터 부분 만 수정하면됩니다. 동시에 일반 데이터 부분은 배경에 의해 생성되므로 이러한 교체가 더 편리합니다. 이 경우 포스터는 모두 템플릿과 데이터에 의해 생성됩니다.
섹션을 봅니다
효과 영역은 다음 세 부분으로 분해됩니다.
• 현재 포스터 영역
수평 및 수직 중심
<Control Bar Button>에 의해 표시 및 뒤집을 수 있습니다.
• 왼쪽 및 왼쪽 저장 공간
<The Current Poster Area>에 의해 왼쪽 및 오른쪽 영역으로 나뉩니다.
다른 포스터를 보관하는 것입니다
각 포스터는 무작위로 배치되고 각도됩니다
• 제어 바 영역
해당 포스터를 제어하고 표시합니다
플립 토글 <현재 디스플레이 포스터> 앞뒤
구현 된 HTML 코드는 다음과 같습니다.
<body onselectStart = 'return false;'> <!-여기에서 페이지의 텍스트가 선택되는 것을 방지합니다-> <!-2. 템플릿 문자열로 뷰를 다시 작성하십시오-> <div id = "랩"> <!-div.photo는 번역과 회전을 담당합니다-> <div onclick = "Turn (this)"id = "index}">} "}"} "}" 앞뒤로 뒤집는 -> <div> <p> <img src = "photo/{{img}}"> </p> <p> {{caption}} </p> </div> <div> <p> {desc}}}} </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>여기, {{img}}, {{caption}} 및 {{desc}}은 템플릿 문자열이며 데이터 부분은 해당하지만 나중에 교체됩니다.
보기 부분의 스타일은 다음과 같습니다.
<스타일 유형 = "text/css"> *{패딩 : 0; 여백 : 0; } body {배경색 : #ffff; 색상 :#555; Font-Family : 'Avenir Next', 'Lantinghei SC'; 글꼴 크기 : 14px; -Moz-Font Smoothing : antiAliased; -webkit-font-smoothing : antialiased;/*font smooth*/} .wrap {// 이미지 영역은 신체 너비의 수직 중심 : 100%; 높이 : 900px; 위치 : 절대; /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- top:50%; 마진-탑 : -300px; /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- /*각 포스터는 상단과 왼쪽을 사용하여 무작위로 위치되므로 위치로 설정하십시오*/ 위치 : 절대; z- 인덱스 : 1; Box-Shadow : 0 1px RGBA (0,0,0, .01); /*변환 : Rotatey (30deg);*/ -moz -transition : 모든 .6s; /*포스터가 애니메이션 효과를 생성하기 위해 움직일 수 있도록하십시오*/ -WebKit -transition : 모든 .6s; } .Photo .Side {너비 : 100%; 높이 : 100%; 배경색 : #eee; 위치 : 절대; 상단 : 0; 오른쪽 : 0; 패딩 : 20px; 박스 사이징 : 국경 박스; } .photo .side-front .image {너비 : 100%; 높이 : 250px; 라인 높이 : 250px; 오버플로 : 숨겨진; } .photo .side-front .image img {너비 : 100%; } .Photo.-Side-Front .caption {Text-Align : Center; 글꼴 크기 : 16px; 라인 높이 : 50px; } .photo .side-back .desc {color :#666; 글꼴 크기 : 14px; 라인 높이 : 1.5EM; } /*현재 선택된 포스터 스타일* /.photo_center { /*--- 구현 세로 센터링 방법 왼쪽 : 50%; 상단 : 50%; 마진 왼쪽 : -130px; 마진-탑 : -160px; *//*수직 센터링 방법 구현 2*/ 상단 : 0; 하단 : 0; 왼쪽 : 0; 오른쪽 : 0; 마진 : 자동; z-index : 999; // 현재 선택된 포스터를 다른 포스터로 덮지 않게하십시오}/*뒤집는 책임*/.Photo-Wrap {위치 : 절대; 너비 : 100%; 높이 : 100%; -Moz 변환 스타일 : PRERSERD-3D; -webkit-transform 스타일 : Preserve-3D;/*내부의 요소가 3D*/ 변환 스타일의 효과를 지원하도록하십시오 : Preserve-3D;/*이 문장으로 인해 Firefox의 뒷면을 표시 할 수 없습니다*/ -webkit-transition : 모두 1s; -Moz-transition : 모두 1s; 전환 : 모두 1s; } .Photo-wrap .Side {-moz-backface-visibility : Hidden; // 화면이 화면 WebKit-backface-visibility : 숨겨진; 백 페이스-가시성 : 숨겨진; } .photo-wrap .side-front {-moz-transform : rotatey (0deg); -webkit-transform : Rotatey (0DEG); 변환 : Rotatey (0DEG); } .photo-wrap .Side-back {-moz-transform : rotatey (180deg); -webkit-transform : Rotatey (180deg); 변환 : Rotatey (180deg); } .photo-front .Photo-wrap {-moz-transform : rotatey (0deg); -webkit-transform : Rotatey (0DEG); 변환 : Rotatey (0DEG); } .photo-back .Photo-wrap {-moz-transform : rotatey (180deg); -webkit-transform : Rotatey (180deg); 변환 : Rotatey (180deg); } /*제어 버튼 스타일* / .nav {너비 : 40%; 높이 : 30px; 라인 높이 : 30px; 위치 : 절대; 왼쪽 : 30%; 하단 : 20px; Z- 인덱스 : 999; /*배경색 : #fff;*/ Text-Align : 센터; } /*일반 스타일* / .nav .i {너비 : 30px; 높이 : 30px; 디스플레이 : 인라인 블록; 커서 : 포인터; 배경색 : #AAA; 텍스트 정렬 : 센터; 국경-라디우스 : 50%; -Moz 변환 : 스케일 (.48); -webkit 변환 : 스케일 (.48); 변환 : 스케일 (.48); -webkit-transition : 모두 1s; -Moz-transition : 모두 1s; } .nav .i : {} /*후 현재 선택된 스타일* / .nav .i_current {-moz -transform : scale (1); -webkit 변환 : 스케일 (1); } .nav .i_current : {불투명도 : 1; } /*back {-moz-transform : rotatey (-180deg); -webkit 변환 : Rotatey (-180deg); 배경색 :#555; }/*스타일 최적화,*/ .Photo {/*아래의 정의는 이미지의 갑작스런 플래시를 제거하는 것입니다*/ 왼쪽 : 50%; 상단 : 50%; 마진 : -160px 0 0 -130px; } .Photo-Wrap {-moz-transform-origin : 0% 50%; -webkit-transform-origin : 0% 50%; } .photo-front .Photo-wrap {-moz-transform : 번역 (0px, 0px) Rotatey (0DEG); -webkit-transform : 번역 (0px, 0px) Rotatey (0DEG); } .photo-back .photo-wrap {-moz-transform : translate (260px, 0px) Rotatey (180deg); -webkit-transform : 번역 (260px, 0px) Rotatey (180deg); }다음은 스타일의 중요한 부분입니다.
사례의 설정 : -webkit-perpective : 800px;
이것을 설정 한 다음 Rotatey (45deg)를 설정하는 효과를 볼 수 있습니다. -webkit -transform이 설정되지 않으면 회전 효과가 표시되지 않습니다. 그림의 회전은 비행기에서 회전하고 있습니다. 너무 작게 설정되면 효과는 다음과 같습니다.
Div.Photo는 그림의 번역 및 회전을 담당하는 반면 Div.Photo-wrap은 3D 플립 (전면 및 후면 전환)을 담당합니다. 내부의 요소가 3D 효과를 지원하기 위해 Div.Photo-Wrap의 경우 -webkit-transform 스타일 : Preserve-3D를 설정하십시오.
.Photo-Wrap. 사이드 스타일 -WebKit-Backface-Visibility : 숨겨진; 이 문장의 목적은 요소가 화면에 직면하지 않을 때 숨기는 것입니다.
사진을 움직이고 플립 애니메이션 효과를 만들기 위해 .photo-wrap에 대한 -webkit-transition을 설정하십시오. 아래 전환에 대한 설명을 보자.
내비게이션 바 스타일
/*일반 스타일*/ .nav .i {너비 : 30px; 높이 : 30px; 디스플레이 : 인라인 블록; 커서 : 포인터; 배경색 : #AAA; 텍스트 정렬 : 센터; 국경-라디우스 : 50%; -Moz 변환 : 스케일 (.48); -webkit 변환 : 스케일 (.48); 변환 : 스케일 (.48); -webkit-transition : 모두 1s; -Moz-transition : 모두 1s; } /*현재 선택된 스타일* / .nav .i_current {-moz -transform : scale (1); -webkit 변환 : 스케일 (1); } .nav .i_current : {불투명도 : 1; } /*백 스타일* / .nav .i_back {-moz-transform : rotatey (-180deg); -webkit 변환 : Rotatey (-180deg); 배경색 :#555; }내비게이션 바의 분석 다이어그램 :
탐색 표시 줄의 버튼도 앞뒤로 나뉩니다. 앞뒤의 효과를 구별하기 위해 배경색이 다르고 동시에 플립 효과는 일반 버튼 - 변환 : 스케일 (.48) 및 버튼을 선택할 때 스케일 (1)을 줄이기 위해 설정됩니다. 버튼을 확대하거나 축소하는 이유는 현재 버튼을 선택할 때 전체 스타일이 파괴 될지 정확히 알기 때문입니다.
모든 기본 스타일이 설정된 후에는 효과에 따라 일부 최적화가 이루어집니다. 앞뒤로 전환 할 때 그림이 문처럼 오른쪽으로 약간 오프셋되도록하려면 다음 스타일을 추가 할 수 있습니다.
/*스타일 최적화,*/ .Photo {/*아래의 정의는 이미지의 갑작스런 플래시를 제거하는 것입니다*/ 왼쪽 : 50%; 상단 : 50%; 마진 : -160px 0 0 -130px; } .Photo-Wrap {-moz-transform-origin : 0% 50%; -webkit-transform-origin : 0% 50%; } .photo-front .Photo-wrap {-moz-transform : 번역 (0px, 0px) Rotatey (0DEG); -webkit-transform : 번역 (0px, 0px) Rotatey (0DEG); } .photo-back .photo-wrap {-moz-transform : translate (260px, 0px) Rotatey (180deg); -webkit-transform : 번역 (260px, 0px) Rotatey (180deg); }데이터 섹션
데이터는 주로 data.js로 작성됩니다. 데이터 배열은 Data.js에 정의되어 22 장의 사진의 정보를 저장합니다. 데이터 배열의 출력 구조는 다음과 같습니다.
데이터에 저장된 각 객체에는 Caption, Desc 및 IMG의 세 가지 속성이 포함됩니다. 데이터에 저장된 각 객체의 내용은 다음과 같이 출력됩니다. 데이터 부분은 주로 템플릿의 문자열을 대체하는 데 사용됩니다.
data.js의 내용은 다음과 같습니다.
var data = []; var datasts = '1. 사진 1 <br>/<br>/녹색 채소 <br>/<br>/<br>/2. 사진 2 <br>/<br>/사진 2 <br>/<br>/<br>/3. 사진 3 <br>/<br>/<br>/<br>/4. 사진 4 <br>/<br>/<br>/<br>/4. 사진 4 <br>/<br>/<br>/5. 사진 5 <br>/<br>/<br>/<br>/<br>/6. 슈퍼 귀여운 작은 곰 장난감 <br>/<br>/매우 귀여운 작은 곰 장난감 <br>/<br>/>/<br>/<br>/7, 사진 7 <br>/<br>/<br>/<br>/8, photo 8 <br>/<br>/<br>/9, photo 9 <br>/<br>/<br>/9 <br>/<br>/<br>/<br> <br> <br> <br> 10 <br>/<br>/<br>/11, 사진 11 <br>/<br>/<br>/<br>/12, 사진 12 <br>/<br>/<br>/12 <br>/<br>/<br>/13, 사진 13 <br>/<br>/<br>/<br>/14, photo 14 <br>/<br>/<br> <br> <br> plach, 15 <br>/<br>/<br>/<br>/15, 사진 15 <br>/<br>/<br>/<br>/16, 사진 16 <br>/<br>/<br>/<br>/17, 사진 17 <br>/<br>/<br>/<br>/17, 사진 17 <br>/<br>/<br>/<br>/17, 사진 17 <br>/<br>/<br>/<br>/17, 사진 17 <br>/<br>/<br>/<br>/17, 사진 17 <br>/<br>/<br>/<br>/18, 사진 18 <br>/<br>/사진 18 <br>/<br>/<br>/<br>/<br>/photo 19 <br>/<br>/<br>/<br>/<br>/<br>/<br>. 20 <br>/<br>/<br>/photo 20 <br>/<br>/21, 사진 21 <br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>. i ++) {var c = d [i] .split ( '<br> <br>'); data.push ({img : 'img'+(i+1)+'. jpg', caption : c [0] .split ( ',') [1], desc : c [1]};}VCD 분해 컨트롤러 제어
• 모든 포스터 컨텐츠 출력 (템플릿보기 + 데이터)
• 위치 할당 제어 (중앙 위치, 양쪽 위치)
• 제어 막대 출력 및 제어 (스위치, 플립)
모든 포스터를 출력하고 데이터 배열을 통해 반복하고 컨텐츠를 템플릿으로 채 웁니다.
// 4. 모든 포스터 var data = data를 출력합니다. 함수 addPhotos () {var template = $ ( '#wrap'). html (); var html = []; var nav = []; for (data in data) {var _html = template.replace ( '{{index}}', s) .replace ( '{{img}}', data [s] .img) .replace ( '{{caption}}', data [s] .caption) ( '{desc}. html.push (_html); // 각 포스터는 해당 버튼 Nav.push가 있습니다 ( '<span id = "nav _'+s+'"onclick = "turn (this)"> </span>'); } // Traversal html.push ( '<div>'+nav.join ( '')+'</div>') 이후에 다시 씁니다. $ ( '#wrap'). html (html.join ( '')); rsort (random ([0, data.length])); }포스터 분류, 분석 다이어그램은 다음과 같습니다.
왼쪽 및 오른쪽 파티션의 포스터를 정렬 할 때 먼저 다음과 같이 왼쪽 및 오른쪽 파티션에 대한 포스터 위치를 분석하십시오.
임의 숫자를 사용하여 현재 포스터의 왼쪽 위치 및 상단 값을 생성합니다.
// 값 범위를 지원하는 임의의 값을 만듭니다 .Random ([Min, Max]); 함수 랜덤 (범위) {var max = math.max (범위 [0], 범위 [1]); var min = math.min (범위 [0], 범위 [1]); var diff = max-min; var number = math.ceil (math.random ()*diff + min); 반품 번호; } // 6. {x : {x : [min, max], y [min, max]}, 오른쪽 {x : [min, max], y : [min, max]} 함수 범위 () {var ran = {왼쪽 : {x : [], y : []}, 오른쪽 : {x : [], y : []}}; var 랩 = {w : $ ( '#wrap'). width (), // w : 600, h : $ ( '#랩'). 높이 ()} var photo = {w : $ ( '. photo') [0] .clientWidth, h : $ ( '. photo') ran.left.y = [0- photo.h, wrap.h]; Ran.right.x = [wrap.w/2 + photo.w/2, wrap.w + photo.w]; Ran.right.y = ran.left.y; 반환 실행; }그런 다음 포스터를 정렬하십시오
//5. 소조 포스터 함수 RSORT (n) {var _photo = $ ( '. photo'); var photos = []; for (var i = 0; i <_photo.length; i ++) {_photo [i] .classname = _photo [i] .className.replace (// s*photo_center/s*/, ''); _photo [i] .classname = _photo [i] .classname.replace (// s*photo-front/s*/, ''); _photo [i] .classname = _photo [i] .classname.replace (// s*photo-front/s*/, ''); _photo [i] .className = _photo [i] .className = _photo [i] .className.replace (// s*photo-back/s*/, ''); // 사진 선정과 사진백이 모두 위에 대체되므로 _Photo [i] .className += 'Photo-Front'; _photo [i] .style.left = ''; _photo [i] .style.top = ''; _photo [i] .Style [ '-Moz-Transform'] = _photo [i] .Style [ 'transform'] = _Photo [i] .Style [ '-WebKit-Transform'] = 'rotate (0deg) scale (1.3)'; photos.push (_photo [i]); } // var photo_center = $ ( '#photo _'+n) [0]; var photo_center = document.getElementById ( 'photo _'+n); var newclass = photo_center.className + 'photo_center'; //console.log(photo_center.attr('Class ')); photo_center = photos.splice (n, 1) [0]; //photo_center.classname = newclass; $ ( '#photo _'+n) .attr ( 'class', newclass); // 나머지 포스터를 두 부분으로 나눕니다. var photos_right = 사진; var Ranges = 범위 (); // 왼쪽 파티션 정렬 (s in photos_left) {var photo = photos_left [s]; photo.style.left = random (ranges.left.x) + 'px'; photo.style.top = random (ranges.left.y) + 'px'; photo.style [ '-moz-transform'] = photo.style [ 'transform'] = photo.style [ '-webKit-transform'] = 'rotate ('+random ([-150,150])+'deg) 스케일 (1)'; } // 오른쪽 파티션 정렬 (s in photos_right) {var photo = photos_right [s]; photo.style.left = random (Ranges.right.x) + 'px'; photo.style.top = random (Ranges.right.y) + 'px'; photo.style [ '-moz-transform'] = photo.style [ 'transform'] = photo.style [ '-webkit-transform'] = photo.style [ '-webkit-transform'] = photo.style [ '-webkit-transform'] = 'rotate ('+random (100,100]) scale (1) '; } // 제어 버튼 처리 var navs = $ ( '. i'); for (var i = 0; i <navs.length; i ++) {navs [i] .classname = navs [i] .classname.replace (// s*i_current/s*/, ''); navs [i] .classname = navs [i] .classname.replace (// s*i_back/s*/, ''); } // i_current style $ ( '#nav _' +n) [0] .className += 'i_current'; }포스터의 전면과 후면의 전환 효과 및 제어 버튼의 전환 효과 :
함수 회전 (elem) {var cls = elem.className; var n = elem.id.split ( '_') [1]; if (! (/photo_center/.test (cls))) {rsort (n); } // 위의 IF 문을 실행 한 후 클래스 이름이 변경됩니다.이를 원하지 않기 때문에 // 항상 photo_center class var cs = $ ( '#photo _'+n) [0]; cls = cs.className; if (/photo-front/.test (cls)) {cls = cls.replace (/photo-front/, 'photo-back'); $ ( '#nav _' +n) [0] .className += 'i_back'; } else {cls = cls.replace (/photo-back/, 'photo-front') $ ( '#nav _'+n) [0] .className = $ ( '#nav _'+n) [0] .className.replace (// s*i_back/s*/, ''); } cs.className = cls; }RSORT (N)의 N을 기반으로 현재 표시된 포스터 인 포스터를 이해할 수 있으며 현재 선택한 버튼이 어떤 버튼인지 알 수 있습니다.
위는 해당 효과 분석입니다.
요약 :
사례 분석을위한 아이디어 및 방법 :
• 모듈 분석 방법
• VCD 분석 방법
새로운 CSS 효과
• 3D 뷰 위치 설정 및 3D 하위 요소 지원
• 눈에 보이지 않을 때 숨 깁니다
• CSS 회전 (Y 축) 및 변위를 사용하십시오
• CSS 전환 애니메이션
프론트 엔드 스크립팅 기술
• 문자열 교체를위한 간단한 템플릿 기능
• 범위에 따라 임의의 숫자를 얻습니다
• 스크립트를 사용하여 요소의 클래스 이름 및 특정 스타일 속성을 전환합니다.
구현 과정에서 내가 겪은 문제는 이미지를 뒤집을 때 Firefox에 뒷면을 숨길 수 없다는 것입니다. 즉, 다음 코드에는 문제가 있으며 오랫동안 확인되었습니다.
.Photo-Wrap .Side {-moz-backface-visibility : 숨겨진; -webkit-backface-visibility : 숨겨진; Backface-Visibility : 숨겨진;}나는 다음과 같습니다. 나는 변환 스타일을 놓쳤다 : Preserve-3d . 따라서 브라우저 호환성이 있으면 접두사없이 스타일을 작성하는 것을 잊지 마십시오.
.Photo-wrap {위치 : 절대; 너비 : 100%; 높이 : 100%; -Moz 변환 스타일 : PRERSERD-3D; -webkit-transform 스타일 : preserve-3d;/*내부의 요소가 3D*/<span style = "color :#cc0000;"> 변환 스타일 : preserve-3d;/*의 효과를 지원하도록하십시오. -Moz-transition : 모두 1s; 전환 : 모두 1s; }마지막으로 전체 JS 코드가 첨부됩니다.
<script type = "text/javaScript"> // 값 범위를 지원하여 임의의 값을 무작위로 생성합니다 .Random ([min, max]); 함수 랜덤 (범위) {var max = math.max (범위 [0], 범위 [1]); var min = math.min (범위 [0], 범위 [1]); var diff = max-min; var number = math.ceil (math.random ()*diff + min); 반품 번호; } // 4. 모든 포스터 var data = data를 출력합니다. 함수 addPhotos () {var template = $ ( '#wrap'). html (); var html = []; var nav = []; for (data in data) {var _html = template.replace ( '{{index}}', s) .replace ( '{{img}}', data [s] .img) .replace ( '{{caption}}', data [s] .caption) ( '{desc}. html.push (_html); // 각 포스터는 해당 버튼 Nav.push가 있습니다 ( '<span id = "nav _'+s+'"onclick = "turn (this)"> </span>'); } html.push ( '<div>'+nav.join ( '')+'</div>'); $ ( '#wrap'). html (html.join ( '')); rsort (random ([0, data.length])); } addPhotos () // 6. {x : {x : [min, max], y [min, max]}, 오른쪽 {x : [min, max], y : [min, max]} 함수 범위 () {var ran = {왼쪽 : {x : [], y : []}, 오른쪽 : {x : [], y : []}}; var 랩 = {w : $ ( '#wrap'). width (), // w : 600, h : $ ( '#랩'). 높이 ()} var photo = {w : $ ( '. photo') [0] .clientWidth, h : $ ( '. photo') ran.left.y = [0- photo.h, wrap.h]; Ran.right.x = [wrap.w/2 + photo.w/2, wrap.w + photo.w]; Ran.right.y = ran.left.y; 반환 실행; } // 5. 정렬 포스터 함수 rsort (n) {var _photo = $ ( '. photo'); var photos = []; for (var i = 0; i <_photo.length; i ++) {_photo [i] .classname = _photo [i] .className.replace (// s*photo_center/s*/, ''); _photo [i] .classname = _photo [i] .classname.replace (// s*photo-front/s*/, ''); _photo [i] .classname = _photo [i] .classname.replace (// s*photo-back/s*/, ''); _photo [i] .classname = _photo [i] .classname.replace (// s*photo-back/s*/, ''); // 위의 내용은 사진 앞면과 사진백을 모두 대체했기 때문에 _Photo [i] .className += 'Photo-Front'; _photo [i] .style.left = ''; _photo [i] .style.top = ''; _photo [i] .Style [ '-Moz-Transform'] = _photo [i] .Style [ 'transform'] = _Photo [i] .Style [ '-WebKit-Transform'] = 'rotate (0deg) scale (1.3)'; photos.push (_photo [i]); } // var photo_center = $ ( '#photo _'+n) [0]; var photo_center = document.getElementById ( 'photo _'+n); var newclass = photo_center.className + 'photo_center'; //console.log(photo_center.attr('Class ')); photo_center = photos.splice (n, 1) [0]; //photo_center.classname = newclass; $ ( '#photo _'+n) .attr ( 'class', newclass); // 나머지 포스터를 두 부분으로 나누는 var photos_left = photos.splice (0, math.ceil (photos.length/2)); var photos_right = 사진; var Ranges = 범위 (); // 왼쪽 파티션 정렬 (s in photos_left) {var photo = photos_left [s]; photo.style.left = random (ranges.left.x) + 'px'; photo.style.top = random (ranges.left.y) + 'px'; photo.style [ '-moz-transform'] = photo.style [ 'transform'] = photo.style [ '-webKit-transform'] = 'rotate ('+random ([-150,150])+'deg) 스케일 (1)'; } // 오른쪽 파티션 정렬 (s in photos_right) {var photo = photos_right [s]; photo.style.left = random (Ranges.right.x) + 'px'; photo.style.top = random (Ranges.right.y) + 'px'; photo.style [ '-moz-transform'] = photo.style [ 'transform'] = photo.style [ '-webKit-transform'] = 'rotate ('+random ([-10,100])+'deg (1)'; } // 제어 버튼 처리 var navs = $ ( '. i'); for (var i = 0; i <navs.length; i ++) {navs [i] .classname = navs [i] .classname.replace (// s*i_current/s*/, ''); navs [i] .classname = navs [i] .classname.replace (// s*i_back/s*/, ''); } // i_current style $ ( '#nav _' +n) [0] .className += 'i_current'; } 함수 회전 (elem) {var cls = elem.className; var n = elem.id.split ( '_') [1]; if (! (/photo_center/.test (cls))) {rsort (n); } // 위의 IF 문을 실행 한 후 클래스 이름이 변경됩니다. cls = cs.className; if (/photo-front/.test (cls)) {cls = cls.replace (/photo-front/, 'photo-back'); $ ( '#nav _' +n) [0] .className += 'i_back'; } else {cls = cls.replace (/photo-back/, 'photo-front') $ ( '#nav _'+n) [0] .className = $ ( '#nav _'+n) [0] .className.replace (// s*i_back/s*/, ''); } cs.className = cls; } </스크립트>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.