求给一个有关JS对象应用的案例，看了很多对象方面知识，求实践

一直半懂，书上的例子子都是动物啊，人啊什么的，实践起来肯定不是这样的，有适合初学者练习的案例吗？谢谢啊

解决方案 »

  1.   

    正好有个js对象,操作移动层的,很实用,提供参考
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>JS对象</title>
    <style type="text/css">
    *{ font-family:verdana;}
    body{ font-size:12px;}
    pre{font-family:verdana,arial; font-size:11px; color:#0000FF;}
    .red{color:#FF0000;}
    </style>
    <script language="javascript" type="text/javascript">
    function $(refID){ return typeof(refID)=='string' ? document.getElementById(refID) : refID; }var objMove={
    description:'move div auto free in screen',
    author:'shenzhenNBA',
    playerID:'',
    x:0,
    y:0,
    oid:'',
    o:'',
    diffX:2,
    diffY:2,
    speed:30,
    borderStyle:'1px solid #FF0000',
    width:160,
    height:90,
    trim:function(str){return str.replace(/^\s*|\s*$/g,''); },
    init:function(divID){
    this.oid=this.trim(divID);  
    if(this.oid=='') return;
    this.o=$(divID);
    if(!this.o) return;   
    this.o.style.border=this.borderStyle;
    this.o.style.position='absolute';
    this.o.style.backgroundColor='#FFFFFF';
    this.o.style.padding='5px';
    this.o.style.width=this.width+'px';
    this.o.style.height=this.height+'px';
    this.o.style.zIndex=8888;
    this.o.style.display='block';
    try{
    this.x=parseInt(this.o.style.left); 
    this.y=parseInt(this.o.style.top);
    if(isNaN(this.x)) this.x=0;
    if(isNaN(this.y)) this.y=0;
    }catch(e){
    this.x=0; this.y=0;
    }
    var _this=this;  
    this.o.onmouseover=function(){clearInterval(_this.playerID);}
    this.o.onmouseout=function(){
    _this.move();
    }
    },
    move:function(){
    if(this.oid=='') return;   
    var motherObj=this;    
    this.playerID=setInterval(function(){　 motherObj.x+=motherObj.diffX;  
    motherObj.y+=motherObj.diffY;

    if(motherObj.x>=screen.width-motherObj.width) motherObj.diffX = -Math.abs(motherObj.diffX);    
    if(motherObj.x<0) motherObj.diffX = Math.abs(motherObj.diffX);
    if(motherObj.y>=screen.height-motherObj.height) motherObj.diffY = -Math.abs(motherObj.diffY);
    if(motherObj.y<0) motherObj.diffY = Math.abs(motherObj.diffY);
    motherObj.o.style.left = motherObj.x+'px';
    motherObj.o.style.top = motherObj.y+'px';

    $('moveTip').innerHTML='[X:'+motherObj.x+',Y:'+motherObj.y+']';
    },this.speed);
    }
    };
    </script>
    </head>
    <body>
    <h2>JS对象，层的移动</h2>
    <pre>&nbsp;</pre>
    <div id="moveTip"> move tip content...</div>
    <div id="moveDiv" style="left:30; top:100;"> move div content,<br>
    </div>
    <script language="javascript" type="text/javascript">
    window.onload=function(){
    objMove.init('moveDiv');
    objMove.move();
    }
    </script>
    <br>
    </body>
    </html>