1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 html,body{ 8 height: 100%; 9 width: 100%; 10 } 11 .stage{ 12 height:100%; 13 width:100%; 14 position: relative; 15 background-color: #4a96ee; 16 } 17 .sheep{ 18 position: absolute; 19 height: 122px; 20 width: 164px; 21 right: 0px; 22 bottom: 300px; 23 background-image: url(sheep.png); 24 background-repeat: no-repeat; 25 background-position: 0px 0px; 26 cursor: -webkit-grabbing; 27 } 28 </style> 29 </head> 30 31 <body> 32 33 <div id="stage" class="stage"> 34 35 </div> 36 37 </div> 38 <script src="小羊咩咩.js" type="text/javascript" charset="utf-8"></script> 39 </body> 40 </html>
1 var div=document.getElementsByTagName("div")[0]; 2 3 4 function sheepRun(sheep){ 5 sheep.backPoi=0; 6 sheep.top=0; //背景图片的y坐标 7 8 window.setInterval(function(){ 9 sheep.backPoi=sheep.backPoi-164; 10 if(sheep.backPoi==-1312) 11 { 12 sheep.backPoi=0; 13 } 14 sheep.style.backgroundPosition=sheep.backPoi+"px "+sheep.top+"px "; 15 16 sheep.style.left=sheep.offsetLeft-sheep.speed+"px "; 17 sheep.onmousedown=function(e) 18 { 19 var x=e.pageX; 20 var y=e.pageY; 21 sheep.x=e.pageX; 22 sheep.y=e.pageY; 23 i=1; 24 //alert("x:"+x+"y:"+y); 25 document.onmousemove=function(e){ 26 i++; 27 chax=e.pageX-sheep.x; 28 chay=e.pageY-sheep.y; 29 console.log("onmousemove被调用"+i+"次 x:"+chax+" y:"+chay); 30 sheep.style.left=sheep.offsetLeft+chax+"px"; 31 sheep.style.top=sheep.offsetTop+chay+"px"; 32 sheep.x=e.pageX; 33 sheep.y=e.pageY; 34 sheep.speed=0; 35 sheep.top=-122; 36 } 37 document.onmouseup=function(e){ 38 document.onmousemove=null; 39 sheep.speed=sheep.staticspeed; 40 sheep.top=0; 41 } 42 43 } 44 },100);} 45 function createsheeps(){ 46 var _stage=stage; 47 var _sheepRun=sheepRun; 48 function createsheep(){ 49 var sheep=document.createElement("div"); 50 var num1=Math.floor(Math.random()*600); 51 var num2=Math.floor(Math.random()*1500); 52 sheep.style.bottom=num1+"px"; 53 sheep.style.right=num2+"px"; 54 var num3=Math.floor(Math.random()*30) 55 sheep.speed=num3; 56 sheep.staticspeed=10; 57 sheep.className="sheep"; 58 _stage.appendChild(sheep); 59 _sheepRun(sheep); 60 } 61 window.setInterval(function(){ 62 createsheep(); 63 },1000); 64 } 65 createsheeps();
