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 相关文章推荐
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
VUE脚手架具体使用方法
May 20 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 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与SQL注入攻击[一]
2007/04/17 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Python中if有多个条件处理方法
2020/02/26 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
不听老师话的万能检讨书
2014/10/04 职场文书
敬老院活动感想
2015/08/07 职场文书
担保书范文
2019/07/09 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
win10搭建配置ftp服务器的方法
2022/08/05 Servers