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

全栈程序员-站长 • 2022年7月3日下午4:36 • 未分类 • 阅读 24

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

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   });