原生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.可以自己编辑弹出 ...
随机推荐
- socket listen参数中的backlog 的意义!
服务器监听时,在每次处理一个客户端的连接时是需要一定时间的,这个时间非常的短(也许只有1ms 或者还不到),但这个时间还是存在的.而这个backlog 存在的意义就是:在这段时间里面除了第一个连接请求 ...
- IE6 跟随滚动解决方法
position:fixed;_position:absolute; left:0px; top:350px;_top:expression(documentElement.scrollTop +do ...
- 定位form光标行
In AX2009 if you call the research() method on a form passing true, the cursor position within a gri ...
- 使用C#开发计划任务调度服务
在系统运维中常常需要定期去跑一些计划任务,比如扫描服务器监控其性能.检查SQL Server作业是否正常.监控MQ队列是否存在堵塞现象等.如果使用Windows计划任务调度,一来管理起来就比较松散,二 ...
- C++注意
断言assert是仅在Debug版本起作用的宏,它用于检查“不应该”发生的情况. 在函数的入口处,使用断言检查参数的有效性(合法性). 如果程序在assert处终止了,并不是说含有该assert的函数 ...
- APNS 服务推送通知
1. 将app注册notification里面, 并从APNS上获取测试机的deviceToken. - (BOOL)application:(UIApplication *)application ...
- 针对APP的测试过程和重点关注内容,做以下梳理和总结
转载自金阳光测试:http://blog.sina.com.cn/s/blog_12df1b9e60102vy57.html 1. 首先是测试资源确认及准备 (1)产品需求文档.产品原型图.接口说 ...
- 关于C#本质论和CLR via C#中译本,不吐不快
C#本质论和CLR via C#两本好书,周老师可能是俗务缠身,太忙了吧,翻译得只能让人呵呵了. 你要是忙,别接那么多活好不啦. 现在都在说供给侧改革,都在大力提倡工匠精神,我们做技术的,还是踏实点好 ...
- 安卓仿照QQ工单数实现
1.使用BadgeView 控件,可以在网上下载源码或者Jar包 2.使用方法 holder.badgeView = new BadgeView(holder.item_layout.getConte ...
- 浅尝辄止——在C++中调用C#的回调函数——COM方式
这种方式比较简单,给大家分享一下,同时讲一下SafeArray内定义结构体的方法 1. 需求描述 需求是这样的,C++代码和C#代码相互通信(C++一般做服务,C#做客户端),C++一侧准备好数据,然 ...