javascript_form 특수 효과를 사용하여 슬라이드쇼(360도 파노라마 사진) 만들기
- WBOY원래의
- 2016-05-16 15:48:391805검색
슬라이드는 고객에게 제품을 시연할 때 자주 사용됩니다. 360도 파노라마 사진 효과는 사용자에게 좋은 경험 가치를 제공합니다. 여기에서는 Robert Pataki의 360도 파노라마 슬라이드쇼 구현 튜토리얼을 소개하고 싶습니다. 이 튜토리얼에서는 js를 사용하여 멋진 파노라마 슬라이드쇼를 구현합니다.
이 튜토리얼에서는 플러그인을 사용하지 않습니다. HTML, CSS 및 자바스크립트를 사용하여 구현합니다. 물론 jQuery 프레임워크도 사용합니다.
어떻게 달성할 수 있나요?
애니메이션 표시 효과를 얻기 위해 캐러셀에 미리 생성된 360도 이미지를 사용합니다. 180개의 이미지가 포함되어 있습니다. 그래서 로딩 시간이 더 길어질 수도 있습니다.
코드 구현
이 효과가 iPad와 iPhone 모두에서 달성될 수 있도록 CSS 코드에 미디어 쿼리를 추가하겠습니다.
1. 코드 파일
js, CSS, 이미지 디렉토리를 추가합니다. CSS 디렉토리에는 Reset.css가 포함되어 있습니다. Node.js에는 jQuery가 포함되어 있습니다. 코드 파일은 다음과 같습니다.
2. 새로운 프로젝트
HTML 파일 index.html을 만듭니다.
에서는 콘텐츠가 크기 조정을 지원하지 않도록 모바일 장치의 뷰포트를 설정합니다. 두 개의 파일 추가reset.css 및 threesixty.css. 사용자 정의 CSS 스타일을 포함합니다.
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/> <title>360</title> <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/> <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/> </head> <body> </body> </html>
3. 진행률 표시줄 로드
슬라이드쇼를 담을
- 과 진행률 표시줄을 표시하는 이 포함되어 있습니다. 우리는 자바스크립트를 사용하여 이미지를 동적으로 로드할 것입니다.
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/> <title>360</title> <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/> <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/> </head> <body> <divid="threesixty"> <divid="spinner"> <span>0%</span> </div> <olid="threesixty_images"></ol> </div> </body> </html>
4. 상호작용 추가
코드 끝에 상호 작용을 처리하기 위해 jQuery를 추가하고 이미지 슬라이드쇼를 처리하기 위해 threesixity.js를 추가합니다.
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="utf-8"> <metaname="viewport"content="initial-scale=1.0, maximum-scale=1.0"/> <title>360</title> <linkrel="stylesheet"href="css/reset.css"media="screen"type="text/css"/> <linkrel="stylesheet"href="css/threesixty.css"media="screen"type="text/css"/> </head> <body> <divid="threesixty"> <divid="spinner"> <span>0%</span> </div> <olid="threesixty_images"></ol> </div> <scriptsrc="js/heartcode-canvasloader-min.js"></script> <scriptsrc="js/jquery-1.7.min.js"></script> <scriptsrc="js/threesixty.js"></script> </body> </html>
5. 스타일
threesixty.css 파일을 추가합니다. Reset.css는 기본 스타일을 설정하는 데 사용됩니다. 먼저 # threesixty 래퍼를 정의합니다. 기본 사진 슬라이드쇼는 960x450입니다. 수평 및 수직 중앙에 위치합니다.
#threesixty {
position:absolute;
overflow:hidden;
top:50%;
left:50%;
width:960px;
height:540px;
margin-left:-480px;
margin-top:-270p
위 내용은 모두 자바스크립트를 사용하여 슬라이드쇼를 만드는 내용입니다. 마음에 드셨으면 좋겠습니다.