css3 컨베이어 샘플
7191 단어 css3
touch.js는 주로 데스크톱에서 손가락 터치, 미끄럼, 방출 등 일련의 사건을 시뮬레이션하여 볼 만하다.
소스는 다음과 같습니다.
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <meta charset="UTF-8" />
5: <title>carousel demo</title>
6: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
7: <script src="https://dl.dropbox.com/u/20786642/touch.js" type="text/javascript"></script>
8: <script src="https://dl.dropbox.com/u/20786642/jq.carousel.js" type="text/javascript"></script>
9: <style>
10: .carousel_paging2 { border-radius: 10px; background: #ccc; width: 10px; height: 10px; float: left; }
11: .carousel_paging2_selected { border-radius: 10px; width: 10px; height: 10px; float: left; background: #000; }
12: .carousel_content { -webkit-transform: translate3d(0, 0, 0); }
13: #carousel img {
14: -webkit-transition: all 0.5s ease-in-out;
15: -webkit-transform: scale(1);
16: width: 300px;
17: height: 420px;
18: }
19: </style>
20: </head>
21: <body>
22: <div id="carousel" style="height:420px; width:300px;margin:auto; ">
23:
24: <div style="background: yellow;">
25: <a href="javascript:alert('test');">
26: I'm a horizontal carousel
27: </a>
28: </div>
29: <div style="background: green;"></div>
30: <div style="background: blue;"></div>
31: <div style="background: pink;"></div>
32:
33: </div>
34: <div id="carousel_dots" style="text-align: center; margin:auto; clear: both; z-index: 200; position:relative;
35: top:-50px; ">
36: </div>
37: <script>
38: //pagingDiv:
39: //pagingCssName:
40: //pagingCssNameSelected: .
41: //vertical:
42: //horizontal: .
43: var carousel=$("#carousel").carousel({ pagingDiv: "carousel_dots", pagingCssName: "carousel_paging2", pagingCssNameSelected: "carousel_paging2_selected", preventDefaults:false });
44: </script>
45: </body>
46: </html>
분류:
carousel
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
초보자를 위한 간단한 카드 호버 애니메이션html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.