基于OpenLayers的WebGIS程序二次开发实例教程
35251 人在学
专题课程
在面向对象编程中，封装(encapsulation)是将对象运行所需的资源封装在程序对象中--基本上，是方法和数据。对象是"公布其接口"。其他附加到这些接口上的对象不需要关心对象实现的方法即可使用这个对象。这个概念就是"不要告诉我你是怎么做的，只要做就可以了。"对象可以看作是一个自我包含的原子。对象接口包括了公共的方法和初始化数据。
回掉函数fn，在所有元素到达目的位置后，判断是否传入一个函数，有就调用if(fn){fn()};
这样一次点击，产生多个动画
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>title</title>
<style>
*{
margin:0;
padding:0;
}
div{
margin-top:30px;
width:200px;
height:100px;
background-color:green;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<inputtype="button"value="移动到400px"id="btn1"/>
<divid="dv">
</div>
<scriptsrc="common.js"></script>
<script>
//点击按钮,改变宽度到达一个目标值,高度到达一个目标值
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
functiongetStyle(element,attr){
returnwindow.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
//element---元素
//json---对象---多个属性及多个目标值
//fn---函数
functionanimate(element,json,fn){
clearInterval(element.timeId);
element.timeId=setInterval(function(){
varflag=true;
for(varattrinjson){
varcurrent=parseInt(getStyle(element,attr));
vartarget=json[attr];
varstep=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";
if(current!=target){
flag=false;
}
}
if(flag){
clearInterval(element.timeId);
if(fn){
fn();
}
}
//测试代码
console.log("目标："+target+"，当前："+current+"，每次移动的步数"+step);
},20)
}
my$("btn1").onclick=function(){
varjson1={"width":400,"height":200,"left":500,"top":80};
animate(my$("dv"),json1,function(){
varjson2={"width":200,"height":100,"left":200,"top":120};
animate(my$("dv"),json2,function(){
varjson3={"width":400,"height":300,"left":300,"top":80};
animate(my$("dv"),json3);
});
});
};
</script>
</body>
</html>
封装就是将抽象得到的数据和行为(或功能)相结合，形成一个有机的整体，也就是将数据与操作数据的源代码进行有机的结合，形成"类"，其中数据和函数都是类的成员。
粤公网安备44010602001432号