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 CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
javascript 鼠标滚轮事件
Apr 09 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
浅析javascript 定时器
Dec 23 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
js实现异步循环实现代码
Feb 16 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
smarty缓存用法分析
2014/12/16 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
PHP中“=>
2019/03/01 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
python2.7安装图文教程
2018/03/13 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
平面设计专业求职信
2014/08/09 职场文书
商场周年庆活动方案
2014/08/19 职场文书
聘任书的格式及模板
2019/10/28 职场文书