javascript实现匀速动画效果
本文实例为大家分享了javascript实现匀速动画的具体代码，供大家参考，具体内容如下
实现思路：
1、主要使用定时函数setInterval()来实现动画效果
2、可以将动画封装成一个函数，这样可以多个元素调用，不用重复写
3、动画函数接收参数- - -元素对象、目标偏移量、回调函数
①函数里添加一个定时函数，给定时函数一个名字，后面清除定时函数要使用定时函数名
②定时函数里面处理程序：
a. 给一个固定的每步移动值，设置元素对象的偏移量匀速变化- - -eg: obj.style.left = obj.offsetLeft + 5 + ‘px';
b. 判断偏移量是否达到目标值，达到的话停止动画- - -
clearInterval(obj.timer);
并且在动画停止时判断是否存在回调函数，有回调函数的话执行回调函数
4、在动画函数的最前面添加清除定时器函数，清除之前的动画影响- - -clearInterval(obj.timer);
有时需要点击按钮后，触发动画这种，没有添加清除的话，重复点击按钮，动画效果会叠加，越来越快
5、也可以将动画函数封装到js文件中进行引用
小提示：以上只是一种方法，不同动画效果根据所需进行调整实现方法
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>匀速动画</title>
<style>
.box {
position: relative;
width: 1000px;
margin-top: 20px;
}
.xiaohuli {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
}
.pikaqiu {
position: absolute;
top: 150px;
left: 0;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<button class="btn1">点击移动小狐狸</button>
<button class="btn2">点击移动皮卡丘</button>
<div class="box">
<img src="images/小狐狸.jpg" alt="" class="xiaohuli">
<img src="images/皮卡丘.jpg" alt="" class="pikaqiu">
</div>
<script>
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var xiaohuli = document.querySelector('.xiaohuli');
var pikaqiu = document.querySelector('.pikaqiu');
btn1.addEventListener('click', function() {
animate(xiaohuli, 300);
})
btn2.addEventListener('click', function() {
animate(pikaqiu, 450);
})
// 动画函数 obj动画对象, target目标左偏移量, callback回调函数
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
obj.style.left = obj.offsetLeft + 5 + 'px';
if (obj.offsetLeft >= target) {
// 停止动画
clearInterval(obj.timer);
// 如果有回调函数，执行回调函数
if (callback) {
callback();
}
}
}, 30);
}
</script>
</body>
</html>
页面效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生JS实现匀速图片轮播动画
JS实现轮播图实现结果图: 需求: 1 根据图片动态添加小圆点 2 目标移动到小圆点轮播图片 3 鼠标离开图片,定时轮播图片:鼠标在图片上时暂停 4 左右两侧可点击轮播图片 一.布局部分 html部分 <div class="w main clearfix"><!--主内容部分开始--> <div class="slider"><!--轮播图部分开始--> <ul class="imgs"
-
javascript匀速动画和缓冲动画详解
关于网页中的动画,在css3中我们已经可以使用一些属性快速的做出来,但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画. 使用js做动画最重要的一个函数就是setInterval函数,这里不再赘述,不懂可以直接百度用法.本文主要讲动画的原理已经在制作过程中的要点. 老规矩,先上代码,能直接看懂的可以节省时间. html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charse
-
JS实现匀速与减速缓慢运动的动画效果封装示例
本文实例讲述了JS实现匀速与减速缓慢运动的动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net JS匀速/减速运动</title> <style> *{ margin: 0; padding: 0; } .box1 { width
-
JS div匀速移动动画与变速移动动画代码实例
1.匀速移动代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div { margin-top: 20px; width: 200px; height: 100px; background
-
JS中offset和匀速动画详解
offset简介 我们知道,三大家族包括:offset/scroll/client.今天来讲一下offset,以及与其相关的匀速动画. offset的中文是:偏移,补偿,位移. js中有一套方便的获取元素尺寸的办法就是offset家族.offset家族包括: offsetWidth offsetHight offsetLeft offsetTop offsetParent 下面分别介绍. 1.offsetWidth 和 offsetHight 用于检测盒子自身的宽高+padding+border
-
原生javascript实现匀速运动动画效果
本文向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码: <html> <head> <meta charset="gb2312"> <head> <title>javascript实现的简单动画</title> <style type="text/css"> #mydiv { width:50px;
-
javascript实现匀速动画效果
本文实例为大家分享了javascript实现匀速动画的具体代码,供大家参考,具体内容如下 实现思路: 1.主要使用定时函数setInterval()来实现动画效果 2.可以将动画封装成一个函数,这样可以多个元素调用,不用重复写 3.动画函数接收参数- - -元素对象.目标偏移量.回调函数 ①函数里添加一个定时函数,给定时函数一个名字,后面清除定时函数要使用定时函数名 ②定时函数里面处理程序: a. 给一个固定的每步移动值,设置元素对象的偏移量匀速变化- - -eg: obj.style.left
-
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
看到这种什么百叶窗的动画,以为都是flash实现的,最近突然灵光一闪,想到了用js实现(虽然我不是做前端的,本人做.net).代码虽然实现了,但是比较乱,先上个图: 一个js的动画,以前以为只有flash可以实现 代码主要就是一些数学的计算,然后结合html,css打造出类似flash的效果. 下面贴出主要的部分代码: function all(books){ for(var i=;i<self.rows;i++) { for (var j = ; j < self.columns; j++)
-
javascript 通用loading动画效果实例代码
由于项目中多处要给ajax提交的时候增加等待动画效果,所以就写了一个简单的通用js方法:代码如下: 复制代码 代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); //wraperid : 显示loding图片的容器元素//ms:表示loding图标显示的时长,毫秒//envent:表示出发事件的事件源对象,用于获得出发事件的对象//callback:表示动画结束后执行的回掉方法//stop()方法表示在回掉方法执行成功后执行的隐藏动画的操
-
javascript制作loading动画效果 loading效果
复制代码 代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); //wraperid : 显示loding图片的容器元素//ms:表示loding图标显示的时长,毫秒//envent:表示出发事件的事件源对象,用于获得出发事件的对象//callback:表示动画结束后执行的回掉方法//stop()方法表示在回掉方法执行成功后执行的隐藏动画的操作AjaxLoding.load = function(lodingid,ms,event,left
-
JavaScript实现扯网动画效果的示例代码
目录 演示 技术栈 源码 css控制 js部分 演示 技术栈 JavaScript prototype(原型对象): 所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法.Date 对象从 Date.prototype 继承. Array 对象从 Array.prototype 继承. Person 对象从 Person.prototype 继承. 所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例. JavaScript 对象
-
九种原生js动画效果
在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果 说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit
-
Javascript动画效果（1）
前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的多物体运动后面我们还会介绍任意值变化的运动.链式运动.同时运动,同时我们还会简单的封装一个运动插件并且还会将Javascript方法和jquery方法进行比较. 1.简单的匀速运动 下面我们介绍一个demo,鼠标移入,动画向右移动(即隐藏部分显示):鼠标离开,动画向左运动(继续隐藏)整个过程都是匀速的.有了前面回到顶部效果作为基础,这