<!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="jquery.min.js"></script>
<script type="text/javascript" src="jquery-bgposanimate.js"></script>
<script type="text/javascript">
//Math.random()
var count = 0;
var speed = 5000;
function randomNum(){
var number = parseInt(Math.random()*9000 + 1000).toString();
for(var i=0;i<number.length;i++){
//如果是第一次加载
if(count == 0){
$('#numberDiv').append('<li style=" background-position:0 ' + (-(number.charAt(i))*150) +'px">' + number.charAt(i) +'</li>');
}else{//非第一次加载
var $thisLi = $('#numberDiv li').eq(i);
//上次数字
var prePositionY = $thisLi.html();
var nowPositionY = number.charAt(i);
var y = 0;
if(nowPositionY > prePositionY){
y = -(nowPositionY*150);
}else{
y = (-10 - nowPositionY)*150;
}
$thisLi.animate({
backgroundPosition: '0 ' + y + 'px'
},speed);
$thisLi.text(nowPositionY);
}
}
count++;
}
</script>
<style type="text/css">
.ul-number li{
background:url(number.png) -100px 10px repeat-y;
height:100px; width:100px; float:left;
/*text-indent:-9999999px;*/ list-style:none;
background-color:#f3efbe; margin-right:20px;
}
</style>
</head>
<body onload="randomNum();">
<ul id="numberDiv" class="ul-number"></ul>
<div style="clear:both; padding-top:100px;"><input type="button" onclick="randomNum();" value="生成随机数" /></div>
</body>
</html>
- 1
- 2
前往页