javascript_form 특수 효과를 사용하여 슬라이드쇼(360도 파노라마 사진) 만들기-JS 튜토리얼-php.cn

javascript_form 특수 효과를 사용하여 슬라이드쇼(360도 파노라마 사진) 만들기

WBOY

풀어 주다： 2016-05-16 15:48:39

원래의

1802명이 탐색했습니다.

슬라이드는 고객에게 제품을 시연할 때 자주 사용됩니다. 360도 파노라마 사진 효과는 사용자에게 좋은 경험 가치를 제공합니다. 여기에서는 Robert Pataki의 360도 파노라마 슬라이드쇼 구현 튜토리얼을 소개하고 싶습니다. 이 튜토리얼에서는 js를 사용하여 멋진 파노라마 슬라이드쇼를 구현합니다.

이 튜토리얼에서는 플러그인을 사용하지 않습니다. HTML, CSS 및 자바스크립트를 사용하여 구현합니다. 물론 jQuery 프레임워크도 사용합니다.

어떻게 달성할 수 있나요?

애니메이션 표시 효과를 얻기 위해 캐러셀에 미리 생성된 360도 이미지를 사용합니다. 180개의 이미지가 포함되어 있습니다. 그래서 로딩 시간이 더 길어질 수도 있습니다.

코드 구현

이 효과가 iPad와 iPhone 모두에서 달성될 수 있도록 CSS 코드에 미디어 쿼리를 추가하겠습니다.

1. 코드 파일

js, CSS, 이미지 디렉토리를 추가합니다. CSS 디렉토리에는 Reset.css가 포함되어 있습니다. Node.js에는 jQuery가 포함되어 있습니다. 코드 파일은 다음과 같습니다.

javascript_form 특수 효과를 사용하여 슬라이드쇼(360도 파노라마 사진) 만들기

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

로그인 후 복사

위 내용은 모두 자바스크립트를 사용하여 슬라이드쇼를 만드는 내용입니다. 마음에 드셨으면 좋겠습니다.