js 클록 플롭 효과 구현 코드 Sharing_javascript 기술-JS 튜토리얼-php.cn

js 클록 플롭 효과 구현 코드 Sharing_javascript 기술

WBOY

풀어 주다： 2016-05-16 15:44:53

원래의

1580명이 탐색했습니다.

잘 보이는지 먼저 작동 렌더링을 보여드리겠습니다!

편집자가 클록 플롭을 캡처했을 때의 렌더링입니다.

공유해주신 자바스크립트 클록 플롭 효과 코드는 다음과 같습니다

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create an Animated Flip Down Clock</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">

 <div id="back">
  <div id="upperHalfBack">
  <img src="spacer.png" /><img id="hoursUpBack" src="Single/Up/AM/0.png"/>
  <img id="minutesUpLeftBack" src="Double/Up/Left/0.png" class="asd" /><img id="minutesUpRightBack" src="Double/Up/Right/0.png"/>
  <img id="secondsUpLeftBack" src="Double/Up/Left/0.png" /><img id="secondsUpRightBack" src="Double/Up/Right/0.png"/>
  </div>
  <div id="lowerHalfBack">
  <img src="spacer.png" /><img id="hoursDownBack" src="Single/Down/AM/0.png" />
  <img id="minutesDownLeftBack" src="Double/Down/Left/0.png" /><img id="minutesDownRightBack" src="Double/Down/Right/0.png" />
  <img id="secondsDownLeftBack" src="Double/Down/Left/0.png" /><img id="secondsDownRightBack" src="Double/Down/Right/0.png" />
  </div>
 </div>
 
 
 <div id="front">
  <div id="upperHalf">
  <img src="spacer.png" /><img id="hoursUp" src="Single/Up/AM/0.png"/>
  <img id="minutesUpLeft" src="Double/Up/Left/0.png" /><img id="minutesUpRight" src="Double/Up/Right/0.png"/>
  <img id="secondsUpLeft" src="Double/Up/Left/0.png" /><img id="secondsUpRight" src="Double/Up/Right/0.png"/>
  </div>
  <div id="lowerHalf">
  <img src="spacer.png" /><img id="hoursDown" src="Single/Down/AM/0.png"/>
  <img id="minutesDownLeft" src="Double/Down/Left/0.png" /><img id="minutesDownRight" src="Double/Down/Right/0.png" />
  <img id="secondsDownLeft" src="Double/Down/Left/0.png" /><img id="secondsDownRight" src="Double/Down/Right/0.png" />
  </div>
 </div> 
</div>



</body>
<script src="mootools.js" type="text/javascript"></script>
<script src="animate.js" type="text/javascript"></script>
</html>

로그인 후 복사

위 내용은 여러분과 공유한 JavaScript 클록 플롭 코드입니다. 마음에 드셨으면 좋겠습니다.