页面物体移动-CSDN博客

本文链接：https://blog.csdn.net/wangzhantao/article/details/84393877
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<style type="text/css">
 
</style>
 <BODY>
  
     <div style="position: absolute;left: 200px;top: 200px;border: 1px solid red ;width: 500px;height: 500px" id="kuang">
     	
     	 <div style="position: absolute;width: 50px;height: 50px;border: 1px solid black;left: 10px;top: 10px;" id="sutff"></div>
     </div>
 </BODY>
 <script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
 <script type="text/javascript">

 //定义 运动的对象 的 类
	function stuff(position, direction,width,height){
		 //方向 
		 this.direction = direction;
		 this.position = position;
		 this.width = width;
		 this.height = height ;
	}

	stuff.prototype.setPosition = function (position){
		this.position = position;
	}
	stuff.prototype.setDirection = function (direction){
		this.direction = direction;
	}
	stuff.prototype.getPosition = function ( ){
		return this.position  ; 
	}		
	stuff.prototype.getDirection = function ( ){
		return this.direction  ;
	}
	stuff.prototype.getHeight = function ( ){
		return this.height  ;
	}
	stuff.prototype.setHeight = function ( height ){
		 this.height=height  ;
	}

	
	stuff.prototype.move = function (){
		switch( this.direction )
		{
			//左上
			case 1 :
				this.position.x = this.position.x - 2;
				this.position.y = this.position.y - 2;
				break;

			//左下
			case 2 :
				this.position.x = this.position.x - 2;
				this.position.y = this.position.y + 2;
				break;
			//右下
			case 3 :
				this.position.x = this.position.x + 2;
				this.position.y = this.position.y + 2;
				break;
			//右上
			case 4 :
				this.position.x = this.position.x + 2;
				this.position.y = this.position.y - 2;
				break ; 
/*
			case 5 :
				this.position.x = this.position.x + 2;
				this.position.y = this.position.y - 2;
				break;
			case 6 :
				this.position.x = this.position.x + 2;
				this.position.y = this.position.y + 2;
				break;
			case 7 :
				this.position.x = this.position.x - 2;
				this.position.y = this.position.y + 2;
				break;
			case 8 :
				this.position.x = this.position.x - 2;
				this.position.y = this.position.y - 2;
				break ; 
				 */
		}

	}

	//定义位置 类  
	function position( x ,y   ){
		this.x = x;
		this.y = y ;
	}
	position.prototype.setX = function (x ){
		this.x = x;
	}
	position.prototype.gettX = function (){
		return this.x;
	}
	position.prototype.setY = function (y ){
		this.y = y;
	}
	position.prototype.getY = function (){
		return this.y;
	}	
	
	

	 //创建运动对象
 	var position = new position( 450 , 30 );
 	//初始化方向  宽度  高度
 	var direction = 1;
 	var width = 50 ;
 	var height = 50 ;
	var stuff = new stuff(position , direction,width, height );

	//50毫秒运动一次 
	window.setInterval( move , 50 );
	
    function move(){
        //外边框的边界 
    	var kuangPosition = $('#kuang').position();
    	var kuangWidth = $('#kuang').width();
    	var kuangHeight = $('#kuang').height();
		//alert( kuangWidth + "   "+kuangHeight  );
		//运动速度 
    	var spead = 2 ;
    	
    	//四个方向的边界处理，碰到边界转向 
		switch( stuff.direction )
		{
			case 1 :
				//alert( (stuff.position.y-spead )+"    "+kuangPosition.top );
				if(stuff.position.y-spead<0 ){
					//alert("方向1 ");
					stuff.direction =  2 ; 
				}
				
				break;
			case 2 :
				if(stuff.position.x-spead<0 ){
					//alert("方向2 ");
					stuff.direction =  3 ; 
				}
				
				break;
			case 3 :
				//alert( stuff.position.y+"   "+ stuff.height +"     "+ kuangHeight );
				if(stuff.position.y+ stuff.height +spead> kuangHeight  ){
					stuff.direction =  4 ; 
				}
				break;
			case 4 :
				if(stuff.position.x+ stuff.width+spead> kuangWidth  ){
					//alert("方向4 ");
					stuff.direction =  1 ; 
				}
				break ; 		
		}
		
		//alert( stuff.direction);
		//物体 运动
		stuff.move();
		//改变 运动物体位置 
        $('#sutff').css({left:stuff.position.x ,top:stuff.position.y });
         
    }

 	
 </script>
</HTML>