css代码
1 *{ 2 padding: 0; 3 margin:0; 4 font-family: Arial; 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);16 header{17 position: relative;18 height: auto;19 padding-bottom: 10px;20 border-bottom: 3px solid rgb(28,137,123)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);31 header h2{32 text-align: right;33 font-size: 12px;34 font-style: italic;35 font-weight: 600;37 #content{38 position: relative;39 height: 500px;40 width: 100%;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;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;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;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;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'); 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)17 xs=-1*xs;19 if(y =contentH-one.height() ||y =0)21 ys=-1*ys;26 st=setInterval(scroll,50);27 one.mouseover(function(){28 clearInterval(st);29 });30 one.mouseout(function(){31 st=setInterval(scroll,50);32 });36 });