使用如下图所示的图片 绘制一个可以走动的时钟：图片width为800, height是按原图比例放缩的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" language="javascript">
// 指针跑起来 function clockRun(id,count) {
count%=360 $("#"+id).css("-moz-transform","rotate("+count+"deg)") $("#"+id).css("-webkit-transform","rotate("+count +"deg)") $("#"+id).css("-o-transform","rotate("+count+"deg)") $("#"+id).css("-ms-transform","rotate("+count+"deg)") $("#"+id).css("transform","rotate("+count+"deg)") } // 校验时间 function check() { var date=new Date(); var hour=date.getHours(); var mini=date.getMinutes(); var secound=date.getSeconds(); //角度 var count=secound*6; var count1=mini*6; var count2=(hour%12)*30+parseInt(mini/12)*6; clockRun(‘second‘,count); clockRun(‘mini‘,count1); clockRun(‘hour‘,count2); } // 调用 window.onload=function() {
check(); window.setInterval("check()","1000"); }
</script>
<style>
#panel{ background:url("1.png"); position:absolute; background-position:-158px -55px; width:587px; height:569px; background-repeat:no-repeat; top:150px; left:150px; z-index:1; } #second{ background:url("1.png"); position:absolute; background-position:-21px -366px; width:23px; height:250px; background-repeat:no-repeat; top:102px; left:288.5px; z-index:4; transform-origin: 11.5px 188px; -moz-transform-origin: 11.5px 188px; -webkit-transform-origin: 11.5px 188px; -o-transform-origin: 11.5px 188px; -ms-transform-origin:11.5px 188px; } #mini{ background:url("1.png"); position:absolute; background-position:-58px -390px; width:21px; height:172px; background-repeat:no-repeat; top:128px; left:289.5px; z-index:3; transform-origin: 10.5px 162px; -moz-transform-origin: 10.5px 162px; -webkit-transform-origin: 10.5px 162px; -o-transform-origin: 10.5px 162px; -ms-transform-origin: 10.5px 162px; } #hour{ background:url("1.png"); position:absolute; background-position:-94px -438px; width:26px; height:127px; background-repeat:no-repeat; top:174px; left:287px; z-index:2; transform-origin: 13px 116px; -moz-transform-origin: 13px 116px; -webkit-transform-origin: 13px 116px; -o-transform-origin: 13px 116px; -ms-transform-origin: 13px 116px; }
</style>
</head>
<body> <div id="panel">
<div id="second"></div>
<div id="mini"></div>
<div id="hour"></div>
</div>
</body>
</html>