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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

초보자를 위한 간단한 카드 호버 애니메이션

html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

css3 특수효과 - 컨베이어 샘플

좋은 웹페이지 즐겨찾기