<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 找茬 练习 </title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{height: 10%;height: 100%;}
body{position: relative;}
.wrap{position: absolute; 100px;height: 100px;background: url(pic_1.jpg) repeat center;left: 50%;margin-left: -50px;top:50%;margin-top: -50px;z-index: 1;border-radius: 50px;}
.bg{position: fixed;top: 0;left:0;; 100%;height: 100%;background: #000}
</style>
</head>
<body>
<div class="wrap">
</div>
<div class="bg"></div>
<script type="text/javascript">
function Pic(){
this.num = 0;
this.timer = null;
this.init();
}
Pic.prototype ={
init : function(){
var _that = this;
this.timer = setInterval(function(){
_that.move()
},1);
},
move : function(){
var _that = this;
this.num++;
if(this.num == 600){
this.num = 0;
//clearInterval(this.timer);
//return false;
}
var style = this.num;
style2 = -this.num/2;
$(".wrap").css({style,height:style,marginTop:style2,marginLeft:style2,borderRadius:style})
}
}
new Pic()
</script>
</body>
</html>