原生JS封装简单动画效果
原生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封装简单动画效果的更多相关文章
- 原生Js封装的动画类
算法用的是Tween类,需要研究的参考这篇文章: http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html 网页里常用的动画 放大 ...
- 使用原生JS封装一个动画函数
最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...
- 原生js实现简单打字机效果
快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里
- 用原生JS写移动动画案例及实际应用
js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...
随机推荐
- 关于语句#ifdef OS_GLOBALS #define OS_EXT #else #define OS_EXT extern #endif 的说明
声明全局变量使用的技术——摘自uC/OS-II中文版 以下是如何定义全局 变量.众所周知,全局变量应该是得到内存分配且可以被其他模块通过C 语言中extern 关键字调用的变量.因此,必须在 .C 和 ...
- java安全沙箱(一)之ClassLoader双亲委派机制
java是一种类型安全的语言,它有四类称为安全沙箱机制的安全机制来保证语言的安全性,这四类安全沙箱分别是: 类加载体系 .class文件检验器 内置于Java虚拟机(及语言)的安全特性 安全管理器及J ...
- Bugtags 创业一年总结
出发 在经历过了多轮的 APP 开发/测试/上线/运营周期之后,我们觉得 APP Bug 反馈环节始终十分低效,我们要来改变一下这个状态.于是有了 bugtags.com. 一年 从去年六月正式立项, ...
- 关于PetaPoco的T4模板使用
PetaPoco是一款适用于.Net 和Mono的微小.快速.单文件的微型ORM.PetaPoco介绍:http://www.cnblogs.com/youring2/archive/2012/06/ ...
- Esfog_UnityShader教程_遮挡描边(实现篇)
在上一篇中,我们基本上说明了遮挡描边实现的一种基本原理.这一篇中我们将了解一下基于这种原理的具体实现代码.本篇中的内容和前几篇教程相比,相对比较难一些,建议先有一些基本的Unity的C#脚本编程经验 ...
- Firefox 插件 FlashGot 创建 Axel 下载任务
运行脚本: #!/bin/sh# FlashGot Command line arguments template: [URL] [COMMENT] [FOLDER]if [ $# = 3 ]; th ...
- SQL存储过程解密
首先要建立一张表和一个存储过程: SQL_DECODE表: CREATE TABLE [dbo].[SQL_DECODE]( ,) NOT NULL, [SQLTEXT] [nvarchar](max ...
- Android自动化学习笔记之MonkeyRunner:用Eclipse执行MonkeyRunner脚本
Info: 初步学习,难免会有疏漏,以后我会不断修改补全,直到完美.转载请注明出处,谢谢. 2014-10-11: 初版 2014-10-16: 完善 ------------------------ ...
- AngularJS-系统代码的配置和翻译
前言:在Web开发中常常会遇到这样的情况,有些页面的下拉选项是固定不变的几个,比如:性别,一般有男.女.保密等.对于这样的情形我们一般在数据库中存储的是数字或者其对应的代码,如果是可维护的需要系统给出 ...
- Devexpress TileNavPane 控件的使用
TileNavPane提供分层水平菜单(最多三层),适用于窗体菜单内容不多或只有几个功能较常用时,风格专业简洁: 将TileNavPane拖到窗体上后,点击右上角的任务箭头,选“Add Button” ...