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

 

你可能感兴趣的:(SetInterval)