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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
javascript实现的网页局布刷新效果
Dec 01 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
JavaScript表单验证实现代码
May 22 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
使用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使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
在Linux下调试Python代码的各种方法
2015/04/17 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
对Python 语音识别框架详解
2018/12/24 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
中国最大的名表商城:万表网
2016/08/29 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
招聘与培训专员岗位职责
2014/01/30 职场文书
大学校庆策划书
2014/01/31 职场文书
元旦晚会邀请函
2014/02/01 职场文书
学校政风行风整改方案
2014/10/25 职场文书
党员带头倡议书
2015/04/29 职场文书