基于OpenLayers的WebGIS程序二次开发实例教程
34459 人在学
专题课程
封装，即隐藏对象的属性和实现细节，仅对外公开接口，控制在程序中属性的读和修改的访问级别;将抽象得到的数据和行为(或功能)相结合，形成一个有机的整体，也就是将数据与操作数据的源代码进行有机的结合，形成"类"，其中数据和函数都是类的成员。
封装缓动(变速)动画---增加任意一个属性
1.本来的变速动画函数，是获取特定的属性(之前案例是向右移动，所以获取的是left属性)
2.现在改变为，获取任意一个属性，使其移动到指定的target，相当于在原animate(element,target)函数上，增加了一个属性，变为animate(element,attr,target)函数
3.改动一：在获取当前元素的位置，varcurrent，用getStyle来获取，因为得到的是字符串类型，包一个parseInt改为数字类型；
4.改动二：移动步数时候，元素的当前位置等于current+"px"，element.style.left更新为element.style[attr],特定的元素用任意元素取代
获得的效果：就是可以使任意元素的，任意一个样式属性，移动到指定的目标位置
attr位置，可以改为left，可以改为heigth,可以改为top，可以改为bgc....等等
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>title</title>
<style>
*{
margin:0;
padding:0;
}
div{
margin-top:20px;
width:200px;
height:100px;
background-color:green;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<inputtype="button"value="移动到400px"id="btn1"/>
<inputtype="button"value="移动到800px"id="btn2"/>
<divid="dv">
<scriptsrc="common.js"></script>
<script>
//点击按钮移动div
my$("btn1").onclick=function(){
//获取div此时left的当前位置,达到目标400
//animate(my$("dv"),"left",400);
//获取div此时的宽度,达到目标200
animate(my$("dv"),"width",200);
};
//获取任意的一个属性的当前的属性值:改用之前封装的getStyle函数
functiongetStyle(element,attr){
//判断浏览器是否支持这个方法
returnwindow.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
//匀速动画
//element---元素
//attr---属性名字
//target---目标位置
functionanimate(element,attr,target){
//清理定时器
clearInterval(element.timeId);
element.timeId=setInterval(function(){
//获取元素的当前位置
varcurrent=parseInt(getStyle(element,attr));//数字类型//===============================
//移动的步数
varstep=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;
element.style[attr]=current+"px";//============================================
if(current==target){
//清理定时器
clearInterval(element.timeId);
}
//测试代码:
console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
},20);
}
</script>
</div>
</body>
</html>
在面向对象编程中，封装(encapsulation)是将对象运行所需的资源封装在程序对象中--基本上，是方法和数据。对象是"公布其接口"。其他附加到这些接口上的对象不需要关心对象实现的方法即可使用这个对象。这个概念就是"不要告诉我你是怎么做的，只要做就可以了。"对象可以看作是一个自我包含的原子。对象接口包括了公共的方法和初始化数据。
粤公网安备44010602001432号