原生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.可以自己编辑弹出 ...
随机推荐
- Spark数据传输及ShuffleClient(源码阅读五)
我们都知道Spark的每个task运行在不同的服务器节点上,map输出的结果直接存储到map任务所在服务器的存储体系中,reduce任务有可能不在同一台机器上运行,所以需要远程将多个map任务的中间结 ...
- codeforces 645 E. Intellectual Inquiry
一个字符串,由前k个字母组成,长度为m + n,其中前m个字符已经确定,后面n个由你自由选择, 使得这个串的不同的子序列的个数最多,空串也算一个子序列. 1 <= m <= 10^6,0 ...
- Python爬虫 网页图片
一 概述 参考http://www.cnblogs.com/abelsu/p/4540711.html 弄了个Python捉取单一网页的图片,但是Python已经升到3+版本了.参考的已经失效,基本用 ...
- 每天一个 Linux 命令(16):which命令
我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which 查看可执行文件的位置. whereis 查看文件的位置. locate 配合数据库查看文件位置 ...
- Android 通过广播获取网络状态
Android系统网络连接状态的改变会发一个广播,注册一个广播接收者,实时动态的检测网络状态,及时提醒用户,优化用户体验. 本文仅提供WIFI 状态的检测作为参考,其他网络连接方式请 ...
- Django HTML 显示文章摘要
在用Django写个人博客,发现一般都是标题加上文章摘要,然后点击标题可以看详细内容.这样主页就可以多显示几篇文章. 那么就要用到文章摘要功能. 比如要100个字的文章摘要,就可以这样写: {{art ...
- EF4.1DbContext使用现成的数据库
在配置文件中使用 <configuration> <connectionStrings> <add name="BlogDB" providerNam ...
- 7、IMS - DNS & ENUM
1.相关基础SBC:http://blog.sina.com.cn/s/blog_7a6f76080100vp9r.html 2.ENUM/DNS查询过程:http://blog.sina.com.c ...
- workplace background
class:SysSetupFormRun public void run() { super(); this.design().colorScheme(FormColorScheme::RGB); ...
- 【小错误】Device eth2 has different MAC address than expected, ignoring.
今天在搭建rac配置IP的时候报错显示如下: Device eth2 has different MAC address than expected, ignoring.[FAILED] 百度了下,问 ...