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 相关文章推荐
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
javascript常用代码段搜集
Dec 04 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
angularjs指令之绑定策略(@、=、&)
Apr 13 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 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将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
JS实现密码框效果
2020/09/10 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
python 控制语句
2011/11/03 Python
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
详谈python read readline readlines的区别
2017/09/22 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
QML实现钟表效果
2020/06/02 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
建筑实习自我鉴定
2013/10/18 职场文书
夫妻吵架保证书
2015/05/08 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript