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

发布时间：2025-12-09 12:01:00 浏览次数：1

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         <p >12             <!--头部-->13             <header>14                 <h1>my Blog</h1>15                 <h2>everyting is value!</h2>16             </header>17             <!--内容块-->18             <p >19              20                 <p >21                  22                 </p>23                 <p >24                  25                 </p>26                 <p >27                  28                 </p>29                 <p >30                  31                 </p>32                 <p >33                  34                 </p>35               36             </p>37 38             <!--底部-->39             <footer>40 41             </footer>42         </p>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   });

155630.html

jquerysetinterval

上一篇：JavaWeb-配置Filter的dispatcher节点下一篇：听音训练软件-工具

知识问答

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

综合百科

网站导航