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 相关文章推荐
Javascript 中的类和闭包
Jan 08 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 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的图形函数中显示汉字
2006/10/09 PHP
一些常用的php函数
2006/12/06 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
Java里面有没有全局变量?为什么?
2015/02/06 面试题
医学生求职自荐信
2013/10/25 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
创业计划书之校园超市
2019/09/12 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python