求给一个有关JS对象应用的案例，看了很多对象方面知识，求实践解决办法
日期：2014-05-16 浏览次数：20603 次
求给一个有关JS对象应用的案例，看了很多对象方面知识，求实践
一直半懂，书上的例子子都是动物啊，人啊什么的，实践起来肯定不是这样的，有适合初学者练习的案例吗？谢谢啊
------解决方案--------------------
正好有个js对象,操作移动层的,很实用,提供参考
一直半懂，书上的例子子都是动物啊，人啊什么的，实践起来肯定不是这样的，有适合初学者练习的案例吗？谢谢啊
------解决方案--------------------
正好有个js对象,操作移动层的,很实用,提供参考
- HTML code
<!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> </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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
