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