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 > 12 <!--头部--> 13 <header> 14 <h1>my Blog</h1> 15 <h2>everyting is value!</h2> 16 </header> 17 <!--内容块--> 18 <div > 19 20 <div > 21 22 </div> 23 <div > 24 25 </div> 26 <div > 27 28 </div> 29 <div > 30 31 </div> 32 <div > 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 });