封装了一个JS方法,可支持块元素的常规动画:高、宽、透明度、位置等,同时支持链式动画和同时运动,参照imooc整理,具体代码如下:

/**
* 获取HTML元素属性值
* obj是Element, attr是属性
**/
function getStyle(obj, attr) {
if (obj.currentStyle) {
  // IE浏览器
  return obj.currentStyle[attr]; 
 } else {
  // Google、Firefox等
  return getComputedStyle(obj, false)[attr];
}
}
/**
* 主函数,实现元素动画。
* obj是Element, attrJson是属性及其目标值的JSON,fn是运动完成后的回调函数,根据回调函数实现链式动画
*/
function startMove(obj, attrJson, fn) {
 // 1. 清空该元素的定时器
clearInterval(obj.timer);
// 变量flag 记录运动是否需要停止
var flag = true;
 // 2. 开启该元素的定时器,间隔时间可重设
 obj.timer = setInterval(function() {
// 遍历attrJson,获取需要运动的属性,对每个属性进行改变
  for (var attr in attrJson) {
// 属性目标值
var iTarget = attrJson[attr];
// 获取原本属性值
var iCur = 0;
if (attr == 'opacity') {
     // 对透明度(opacity)单独处理
iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCur = parseInt(getStyle(obj, attr));
}
// 判断此属性的运动是否已经完成
if (iTarget == iCur) {
continue;
}
flag = false;
// 8为速度系数,可重设
var speed = (iTarget - iCur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (iCur + speed) + ')';
obj.style[attr] = (iCur + speed)/100;
} else {
obj.style[attr] = iCur + speed + 'px';
}
}
// 全部属性均已经运动完成
if (flag) {
clearInterval(obj.timer);
// 如果有回调函数,开启下一个回调函数
if (fn) {
fn();
}
}
 }, 30);
}

调用代码如下:

window.onload = function() {
var li1 = document.getElementById("li1");
li1.onmouseover = function() {
startMove(this, {width:400, height:200, opacity:100});
};
li1.onmouseout = function() {
startMove(this, {width:200, height:100, opacity:30});
}
}

原生JS实现前端动画框架的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

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

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

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

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

  4. 原生Js封装的动画类

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

  5. 前端动画框架GSAP框架随笔

    gsap是目前非常流行的前端动画框架,可以非常轻松构造出复杂的动画效果,这里仅对我实际使用中的一些例子进行总结 官网 示例 文章种所使用代码的在线示例 基础用法 // 声明一个滚动控制器 let ct ...

  6. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

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

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

  8. 基于canvas与原生JS的H5动画引擎

    前一段时间项目组里有一些H5动画的需求,由于没有专业的前端人员,便交由我这个做后台的研究相关的H5动画技术. 通过初步调研,H5动画的实现大概有以下几种方式: 1.基于css实现 这种方式比较简单易学 ...

  9. 近期学习的原生JS知识以及jQuery框架

    [正则表达式]1.正则表达式包括两部分: ① 定义正则表达式的规则 ② 定义正则表达式的模式(i/g/m)2.声明正则表达式: ① 字面声明 : var reg = /表达式规则/表达式模式 ② 使用 ...

随机推荐

  1. apache在linux下安装

    yum安装 主流Linux系统版本基本上都集成了apache服务器httpd,我们可以通过如下命令来查看我们的操作系统上是否已经安装了apache服务器httpd rpm -qa | grep htt ...

  2. Python基础之内置方法

    目录 字符串的内置方法 按索引取值 切片(顾头不顾尾,步长) 长度len 成员运算 移除两边空白strip 切分split 循环 lower&upper startswith & en ...

  3. VIJOS-P1294 拯救OIBH总部

    洛谷 P1506 拯救oibh总部 洛谷传送门 JDOJ:1405: VIJOS-P1294 拯救OIBH总部 JDOJ传送门 Description OIBH被突来的洪水淹没了> .< ...

  4. 第二阶段团队冲刺(个人)——One

    今天的任务:修改登录界面.将原有的登录界面全部改掉,仿照千图网,做界面.

  5. PAC、KNN和GridSearchCV

    PCA PCA主要是用来数据降维,将高纬度的特征映射到低维度,具体可学习线性代数. 这里,我们使用sklearn中的PCA. from sklearn.decomposition import PCA ...

  6. ESA2GJK1DH1K升级篇: STM32远程乒乓升级,基于GPRS模块AT指令TCP透传方式,定时访问升级(含有数据校验)

    实现功能概要 单片机定时使用http访问云端的程序版本,如果版本不一致, 然后通过http下载最新的升级文件,实现远程升级STM32程序. 兼容Air202 ,SIM800 测试准备工作(默认访问我的 ...

  7. vue之子父组件通信

    一. 子-父组件间通信: let children = {    # 定义子组件 template: `<div> <button @click="send"&g ...

  8. VueCli3如何传递scss全局变量

    当我们尝试在一个scss文件中定义全局变量然后在.vue文件中使用的时候 哦豁,找不到变量,意料之外 我发现犯了一个错误,没导入,@import 'path/to/file.scss',不过这样的话, ...

  9. Java调用api使用企业邮箱账户发送邮件

    package cn.ucmed.otaka.healthcare.rubik.common; import lombok.extern.slf4j.Slf4j; import javax.mail. ...

  10. Java编程思想之十八 枚举类型

    关键字enum可以将一组具名的值的有限集合创建为一种新的类型, 而这些具名的值可以作为常规的程序组件使用.这是一种非常有用的功能. 18.1 基本enum特性 创建enum时,编译器会为你生成一个相关 ...