jQuery 슈퍼 쿨 플랫 시계 효과 코드 Sharing_jquery
- WBOY원래의
- 2016-05-16 15:43:091036검색
이 기사의 예에서는 jQuery의 매우 멋진 플랫 시계 효과 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
jQuery에서 생성된 매우 멋진 평면 시계 효과는 수평 눈금 막대를 통해 날짜와 시간을 표시합니다. 테스트 결과 효과가 매우 멋지고 매우 좋은 학습 예제입니다.
여기서는 이전에 구현한 또 다른 특히 참신한 시간 표시 스타일을 언급하고 싶습니다. JS는 온도계 시간 스타일을 구현합니다. 두 가지 모두 전통적인 시계 개념을 완전히 깨뜨렸습니다. 놓치지 마세요.
작업 렌더링: ---------효과 보기 소스 코드 다운로드--- -- -----
팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
여러분과 공유한 jQuery 슈퍼 쿨 플랫 시계 효과 코드는 다음과 같습니다
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,时钟,日期,刻度条,jQuery" />
<meta name="description" content="jQuery制作的超酷平面式时钟效果，更多时钟,日期,刻度条,jQuery请访问脚本之家JS代码频道。" />
<title>jQuery制作的超酷平面式时钟效果_脚本之家</title>
<style type="text/css">
body { background:#bae1ea url(back.jpg) 50% 0px no-repeat; color:#000; }
/* container for clock */
#wrap { position:relative; margin: 100px auto 0; width:700px; height:440px; background:url("slider clock(trans).png") no-repeat top left; border-style:solid; border-width:1px; overflow:hidden; }
/* style background and size of all sliding divs */
#wrap div { position:absolute; margin-left:-700px; width:1400px; height:40px; background:url("slider clock(trans).png") repeat-x; }
/* specific position and background position for sliding divs */
#wrap #day { top:40px; background-position:0 -440px; }
#wrap #month { top:120px; background-position:0 -480px; }
#wrap #date { top:200px; background-position:0 -520px; }
#wrap #hour { top:280px; background-position:0 -560px; }
#wrap #min { top:320px; background-position:0 -600px; }
#wrap #sec { top:400px; background-position:0 -640px; }
#title { margin:20px auto; width:550px; text-align:center; }
#other { margin:10px auto; width:550px; text-align:center; }
</style>
<script type="text/javascript" src="jquery.js"> </script>
<script>
$(document).ready(function(){
function checktime(olddel){
var now = new Date();
var nowdel = now.getDay() + "|" + now.getMonth() + "|" + now.getDate() + "|" + now.getHours() + "|" + now.getMinutes() + "|" + now.getSeconds();
if ( olddel != nowdel ) {
var oldsplit = olddel.split("|");
var nowsplit = nowdel.split("|");
if ( oldsplit[5] != nowsplit[5] ) {
clock_slide('#sec',nowsplit[5],11);
if ( oldsplit[4] != nowsplit[4] ) {
clock_slide('#min',nowsplit[4],11);
if ( oldsplit[3] != nowsplit[3] ) {
clock_slide('#hour',nowsplit[3],28);
if ( oldsplit[2] != nowsplit[2] ) {
clock_slide('#day',nowsplit[0],100);
clock_slide('#date',(nowsplit[2]-1),22);
if ( oldsplit[1] != nowsplit[1] ) {
clock_slide('#month',nowsplit[1],57);
};
};
};
};
};
};
function clock_slide(which,howmuch,multiple){
$(which).stop().animate({marginLeft: ((howmuch*multiple)-700)+'px'}, 250, 'linear');
};
setTimeout(function(){checktime(nowdel);}, 250);
};
checktime("0|0|0|0|0|0");
});
</script>
</head>
<body>
<div id="wrap">
<div id="day"> </div>
<div id="month"> </div>
<div id="date"> </div>
<div id="hour"> </div>
<div id="min"> </div>
<div id="sec"> </div>
</div> <!-- End "wrap" -->
<div style="text-align:center;clear:both">
<p>来源：<a href="http://www.jb51.net" target="_blank">vonholdt</a> 代码整理：<a href="http://www.jb51.net" target="_blank">脚本之家</a> 感谢：<a href="http://www.jb51.net" target="_blank">liulisuo</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>
위는 여러분과 공유한 jQuery 쿨 플랫 시계 효과 코드입니다. 마음에 드셨으면 좋겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.