原生JS封装简单动画效果

一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码

 function animate(obj, target,num){
if(obj.timer) {
//判断定时器是否存在,决定是否清空
clearInterval(obj.timer);
} obj.timer = setInterval(function() {
var leader = obj.offsetLeft;
var step = num;//num为你移动一步的距离 //如果目标在当前位置的左侧,step则应该是负值
if(target < leader){
step = -step;
} //如果距离大于一步,那就放任他跑起来
var instance = Math.abs(target - leader);
if(instance > Math.abs(step)) {
leader = leader + step;
obj.style.left = leader + 'px';
}else{
//如果小于一步的距离,把他抱过去吧
clearInterval(obj.timer);
obj.style.left = target + 'px';
}
},15); }

原生JS封装简单动画效果的更多相关文章

  1. 原生Js封装的动画类

    算法用的是Tween类,需要研究的参考这篇文章: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 网页里常用的动画 放大 ...

  2. 使用原生JS封装一个动画函数

    最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...

  3. 原生js实现简单打字机效果

    快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里

  4. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  5. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  6. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  7. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  8. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  9. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

随机推荐

  1. OAF_开发系列17_实现OAF数组应用Vector / Hashmap / Hashtable / Arraylist(案例)

    20150506 Created By BaoXinjian

  2. 关于Spring事务回滚的问题

    在spring的配置文件中,如果数据源的defaultAutoCommit设置为True了,那么方法中如果自己捕获了异常,事务是不会回滚的,如果没有自己捕获异常则事务会回滚,如下例比如配置文件里有这么 ...

  3. Shift的用法

    Shell编程中Shift的用法     位置参数可以用shift命令左移.比如shift 3表示原来的$4现在变成$1,原来的$5现在变成$2等等,原来的$1.$2.$3丢弃,$0不移动.不带参数的 ...

  4. java单列设计模式 小记

    单例设计模式-------懒汉式,饿汉式 单例设计模式是一种很常见的设计模式 在这里介绍两种单例设计模式 懒汉式与饿汉式 一.先说一说单例设计模式的特点: >>1.单例设计模式保证一个类只 ...

  5. 飞思卡尔imx6开发板Linux下GPIO驱动

    控制GPIO_1_28的输出: #define MY_BOMB_GPIO       IMX_GPIO_NR(1, 28) 配置为输出方式: gpio_direction_output (MY_BOM ...

  6. js访问xml

    从w3school中获取代码 <html> <head> <script type="text/javascript"> var xmlhttp ...

  7. SQLServer 列出每个表的列和属性

    USE DBProjectSY GO SELECT OBJECT_SCHEMA_NAME(T.[object_id], DB_ID()) AS [架构名] , T.[name] AS [表名] , A ...

  8. 在windows编译MariaDB

    OS: Windows XP sp3 IDE: VS2010 MariaDB: V5.5 (到目前为止2016.5,中文域(.cn)只有清华大学 TUNA 镜像源可用) (.tar.gz为源码:.zi ...

  9. windows python文件拷贝到linux上执行问题

    之前在Windows下写好了一个Python脚本,运行没问题,今天在Linux下,脚本开头的注释行已经指明了解释器的路径,也用chmod给了执行权限,但就是不能直接运行脚本. 1 问题1: 报错:: ...

  10. JAVA Socket 编程学习笔记(二)

    在上一篇中,使用了 java Socket+Tcp/IP  协议来实现应用程序或客户端--服务器间的实时双向通信,本篇中,将使用 UDP 协议来实现 Socket 的通信. 1. 关于UDP UDP协 ...