<!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>
<style type="text/css">
/*网页高度*/ 
body{ height:3000px;} 
div,ul,li,body{margin:0; padding:0;} 
/*position:absolute;用于元素的定位*/ 
#roll{ background:url(/images/f_notice.jpg) 0 0 no-repeat;width:140px; height:217px; position:absolute;} 
.timemsg{ margin-left:26px; margin-top:114px;color:#c02b2b; font-size:16px; font-weight:bold;}
</style>
</head>

<body>
<div id="roll">
    <div class="timemsg">
    	<!-- <span id="t_d">00:</span> -->
        <span id="t_h">00:</span>
        <span id="t_m">00:</span>
        <span id="t_s">00</span>
    </div>
</div> 
</body>
</html>

<script type="text/javascript">
    function getRTime(){
        var EndTime= new Date('2014/12/31 12:30:00'); //截止时间
        var NowTime = new Date();
        var t =EndTime.getTime() - NowTime.getTime();
        // var d=Math.floor(t/1000/60/60/24);
        var h=Math.floor(t/1000/60/60%24);
        var m=Math.floor(t/1000/60%60);
        var s=Math.floor(t/1000%60);
        // document.getElementById("t_d").innerHTML = d + ":";
		document.getElementById("t_h").innerHTML = h + ":";
        document.getElementById("t_m").innerHTML = m + ":";
        document.getElementById("t_s").innerHTML = s ;
       }
    setInterval(getRTime,1000);
</script>

<script>
	var roll=document.getElementById('roll'), 
	initX=0, 
	initY, 
	compY, 
	sp=15, 
	//可调整时间间隔，步进值不宜过大，不然IE下有点闪屏； 
	timeGap=5, 
	doc=document.documentElement, 
	docBody=document.body; 
	compY=initY=100; 
	roll.style.right=initX+"px"; 
	;(function(){ 
	var curScrollTop=(doc.scrollTop||docBody.scrollTop||0)-(doc.clientTop||docBody.clientTop||0); 
	//每次comP的值都不一样；直到roll.style.top===doc.scrollTop+initY； 
	compY+=(curScrollTop+initY-compY)/sp; 
	roll.style.top=Math.ceil(compY)+"px"; 
	setTimeout(arguments.callee,timeGap); 
	})(); 
</script>
