jquery的setInterval函数用法「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

html代码

 1 <!doctype html>  2 <html>  3 <head>  4 <meta charset="utf-8"/>  5 <link rel="stylesheet" href="./css/style.css"/>  6 <script src="./js/jq.js" type="text/javascript"></script>  7 <script src="./js/js.js" type="text/javascript"></script>  8 </head>  9 <body> 10 <!--所有包--> 11 <div id="wrap"> 12 <!--头部--> 13 <header> 14 <h1>my Blog</h1> 15 <h2>everyting is value!</h2> 16 </header> 17 <!--内容块--> 18 <div id="content"> 19 20 <div id="good1"> 21 22 </div> 23 <div id="good2"> 24 25 </div> 26 <div id="good3"> 27 28 </div> 29 <div id="good4"> 30 31 </div> 32 <div id="good5"> 33 34 </div> 35 36 </div> 37 38 <!--底部--> 39 <footer> 40 41 </footer> 42 </div> 43 44 </body> 45 </html>

css代码

 1 *{  2  padding: 0;  3  margin:0;  4  font-family: Arial;  5 }  6 body{  7  padding: 30px;  8  background: rgb(192,192,192)}  9 #wrap{ 10  padding: 50px; 11  width: 900px; 12  height: auto; 13  margin:0px auto; 14  background:rgb(255,255,255); 15 } 16 header{ 17  position: relative; 18  height: auto; 19  padding-bottom: 10px; 20  border-bottom: 3px solid rgb(28,137,123) 21 } 22 header h1{ 23  text-align: center; 24  height: 45px; 25  font-size: 36px; 26  line-height: 45px; 27  font-weight: 400; 28  font-family: Garamond; 29  color: rgb(187,10,10); 30 } 31 header h2{ 32  text-align: right; 33  font-size: 12px; 34  font-style: italic; 35  font-weight: 600; 36 } 37 #content{ 38  position: relative; 39  height: 500px; 40  width: 100%; 41 42 } 43 #content #good1{ 44  position: absolute; 45  top: 0px; 46  left: 0px; 47  width: 180px; 48  height: 180px; 49  background: rgba(234,175,174,0.54); 50  border-radius: 90px; 51 } 52 #content #good2{ 53  position: absolute; 54  top: 20px; 55  left: 120px; 56  width: 180px; 57  height: 180px; 58  background: rgba(234,175,174,0.54); 59  border-radius: 90px; 60 } 61 #content #good3{ 62  position: absolute; 63  top: 0px; 64  left: 180px; 65  width: 180px; 66  height: 180px; 67  background: rgba(234,175,174,0.54); 68  border-radius: 90px; 69 } 70 #content #good4{ 71  position: absolute; 72  top: 40px; 73  left: 350px; 74  width: 180px; 75  height: 180px; 76  background: rgba(234,175,174,0.54); 77  border-radius: 90px; 78 } 79 #content #good5{ 80  position: absolute; 81  top: 60px; 82  left: 650px; 83  width: 180px; 84  height: 180px; 85  background: rgba(234,175,174,0.54); 86  border-radius: 90px; 87 }

js代码

 1 $(document).ready(function(){  2 var content=$('#content');  3  4 var one=$('#good1');  5 var x=0;  6 var y=0;  7 var xs=10;  8 var ys=10;  9 var contentW=$('#content').width(); 10 var contentH=$('#content').height(); 11 function scroll(){ 12 x+=xs; 13 y+=ys; 14 one.css({"left":x+"px","top":y+"px"}); 15 if(x>=contentW-one.width() ||x<=0) 16  { 17 xs=-1*xs; 18  } 19 if(y>=contentH-one.height() ||y<=0) 20  { 21 ys=-1*ys; 22  } 23 24  } 25 26 st=setInterval(scroll,50); 27 one.mouseover(function(){ 28  clearInterval(st); 29  }); 30 one.mouseout(function(){ 31 st=setInterval(scroll,50); 32  }); 33 34 35 36 });