javascript 缓冲运动框架的实现


Posted in Javascript onSeptember 29, 2017

javascript 缓冲运动框架的实现

框架的使用,大大的提高了我们的编码的效率,下面分享一个缓冲运动框架。

实例代码:

/**
 * Created by wang on 2016/8/3.
 */

//获取非行间样式和行间样式
function getStyle(obj,name) {
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else {
    return getComputedStyle(obj,false)[name];
  }
}
//获取非行间样式和行间样式

//缓冲运动框架
var timer=null;
function startMove(obj,attr,iTarget) {
  clearInterval(obj.timer);
  obj.timer=setInterval(function () {
    var cur=0;

    if(attr=='opacity'){
      cur=Math.round(parseFloat(getStyle(obj,attr))*100);
    }
    else {
      cur=parseInt(getStyle(obj,attr));
    }
    var speed=(iTarget-cur)/6;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if(cur==iTarget){
      clearInterval(timer);
    }
    else {
      if(attr=='opacity'){
        obj.style.filter='alpha(opcity:'+(cur+speed)+')';
        obj.style.opacity=(cur+speed)/100;
      }
      else {
        obj.style[attr]=cur+speed+'px';
      }
    }
  },30)
}
//缓冲运动框架

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
JQuery 学习笔记 选择器之六
Jul 23 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 #Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 #Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 #Javascript
微信小程序之选项卡的实现方法
Sep 29 #Javascript
vue-cli的eslint相关用法
Sep 29 #Javascript
JavaScript数组的5种迭代方法
Sep 29 #Javascript
微信小程序之GET请求的实例详解
Sep 29 #Javascript
You might like
PHP中的float类型使用说明
2010/07/27 PHP
php购物车实现方法
2015/01/03 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
python爬虫的工作原理
2017/03/05 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
用Python逐行分析文件方法
2019/01/28 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
python为什么要安装到c盘
2020/07/20 Python
如何使用python写截屏小工具
2020/09/29 Python
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
Linux的主要特性
2014/10/06 面试题
Java程序员面试题
2013/07/15 面试题
《愚公移山》教学反思
2014/02/20 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
python的html标准库
2022/04/29 Python
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript