下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:封装一个简单的动画函数

作者:路宝的link     来源: https://www.cnblogs.com/myan/p/11551576.html点击数:1034发布时间: 2020-03-04 19:41:44

标签: 面向对象编程css函数

Web开发

  封装,即隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读和修改的访问级别;将抽象得到的数据和行为(或功能)相结合,形成一个有机的整体,也就是将数据与操作数据的源代码进行有机的结合,形成"类",其中数据和函数都是类的成员。

  /**

  *

  *动画函数多个目标值之间移动

  *1、如果是正值,则向大取整2、如果是负值,则向小取整

  *

  *

  *

  *@param{元素}obj

  *@param{距离}target

  *@param{回调函数}callback

  */

  functionainmate(obj,target,callback){

  //清除定时器,是指清除谁的定时器,这里是轮播图,所以清除元素的定时器

  clearInterval(obj.timer);

  //创建定时器,清除定时器,页面中就没有定时器,每轮播一次创建一个定时器,

  //使其页面中只保留一个定时器,同理元素的定时器

  obj.timer=setInterval(function(){

  //定义步长值变量,用来接收走的步数

  //步长值=(距离-元素距离左边的距离)除10;//10代表分成几份,可以更多,可以更少,看个人审美

  varstep=(target-obj.offsetLeft)/10;

  //三元表达式,当step的距离是向右移动是整数,会有一点误差,所以天花板函数取大,取整相反往左移动会出现小数,则地板函数取小,取整

  step=step>0?Math.ceil(step):Math.floor(step);

  //轮播一周后,清除定时器

  if(obj.offsetLeft==target){

  clearInterval(obj.timer);

  //回调函数,判断是否有回调函数,如果有调用,如果没有不调用

  if(callback){

  callback();

  }

  //简写方法

  //callback&&callback();

  }

  //轮播的元素需要有css里定位

  //轮播的运算

  obj.style.left=obj.offsetLeft+step+'px';

  },30)

  }

  在面向对象编程中,封装(encapsulation)是将对象运行所需的资源封装在程序对象中--基本上,是方法和数据。对象是"公布其接口"。其他附加到这些接口上的对象不需要关心对象实现的方法即可使用这个对象。这个概念就是"不要告诉我你是怎么做的,只要做就可以了。"对象可以看作是一个自我包含的原子。对象接口包括了公共的方法和初始化数据。

赞(8)
踩(0)
分享到:
上一篇:web前端:input
华为认证网络工程师 HCIE直播课视频教程