1. 'use strict';
  2. function getStyle(obj,sName){
  3. return (obj.currentStyle||getComputedStyle(obj,false))[sName];
  4. }
  5. //function move(obj,json,time,type,fn)
  6. function move(obj,json,options){
  7. options=options||{};
  8. options.time=options.time||700;
  9. options.type=options.type||'linear';
  10. var start={};
  11. var dis={};
  12. for(var name in json){
  13. start[name]=parseInt(getStyle(obj,name));
  14. if(isNaN(start[name])){
  15. //加默认值
  16. switch(name){
  17. case 'left':
  18. start[name]=obj.offsetLeft;
  19. break;
  20. case'top':
  21. start[name]=obj.offsetTop;
  22. break;
  23. case'width':
  24. start[name]=obj.offsetWidth;
  25. break;
  26. case'Height':
  27. start[name]=obj.offsetHeight;
  28. break
  29. case'opacity':
  30. start[name]=1;
  31. break;
  32. case'border':
  33. start[name]=0;
  34. }
  35. }
  36. dis[name]=json[name]-start[name];
  37. }
  38. var count=Math.floor(options.time/30);
  39. var n=0;
  40. clearInterval(obj.timer);
  41. obj.timer=setInterval(function(){
  42. n++;
  43. var ocr='';
  44. for(var name in json){
  45.  
  46. switch(options.type){
  47. case'linear':
  48. var a=n/count;
  49. ocr=start[name]+a*dis[name];
  50. break;
  51. case'ease-in':
  52. var a=n/count;
  53. ocr=start[name]+Math.pow(a,3)*dis[name];
  54. break;
  55. case'ease-out':
  56. var a=(1-n/count);
  57. ocr=start[name]+(1-Math.pow(a,3))*dis[name];
  58. break;
  59. }
  60. if(name=='opacity'){
  61. obj.style[name]=ocr;
  62. obj.style[name]='filter:alpha(opacity='+ocr*100+')';
  63. }else{
  64. obj.style[name]=ocr+'px';
  65. }
  66. }
  67. if(n==count){
  68. clearInterval(obj.timer);
  69. options.end&&options.end();
  70. }
  71. },30);
  72. }

2-5 js基础-简易运动框架的更多相关文章

  1. 使用Node.js实现简易MVC框架

    在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...

  2. [转] 使用Node.js实现简易MVC框架

    在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...

  3. JS 之完美运动框架

    完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...

  4. 原生JS封装animate运动框架

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  5. JS 之完美运动框架 如何同时改变元素多个属性?

    正如改变一个属性的方法,可以使用已经写好的运动函数如move(obj,attr,target,fn);我们可能会想这样做, 调用两次运动函数,如同时改变宽和高,move(obj,'width',tar ...

  6. [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图

    在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...

  7. js运动框架逐渐递进版

    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...

  8. JavaScript 基础入门11 - 运动框架的封装

    目录 JavaScript 运动原理 运动基础 简单运动的封装 淡入淡出 不同属性的设置 多属性值同时运动 运动回调,链式运动 缓冲运动 加入缓冲的运动框架 案例1 多图片展开收缩 运动的留言本 Ja ...

  9. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

随机推荐

  1. Mirth Connect的简单使用

    第一步: 切换到Channels界面,右键点击New Channel 第二步 : 上面是设置一些通道信息. 其中summary(概要) 界面主要包含 通道名称,数据类型,依赖,通道初始状态,附件(是否 ...

  2. VMware虚拟机无法启动,提示“无法打开磁盘,未能锁定文件”

    VMware在进入linux时,提示:无法打开磁盘 F:\Debian\Debian linux2.6.x kernel.vmdk 或者某一个快照所依赖的磁盘原因: 未能锁定文件 问题出现的原因:虚拟 ...

  3. Jenkins Pipeline+sonar构建质量平台

    前提: Jenkins JDK 目录: 1.安装sonar插件:SonarQube Scanner for Jenkins 2.安装SonarQube 3.安装sonar-scanner ++++++ ...

  4. Caliburn.Micro 资源随时添加

    Caliburn.Micro – Hello World http://buksbaum.us/2010/08/01/caliburn-micro-hello-world/ http://blog.c ...

  5. 如何让你的项目同时支持go vendor和go module

    目录 如何让你的项目同时支持go vendor和go module 1. go module简介 2. 使用go mod命令管理项目 2.1 初始化环境 2.2 构建 3. 保持兼容性 4. 使用go ...

  6. BZOJ 1801--中国象棋(DP)

    1801: [Ahoi2009]chess 中国象棋 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1995  Solved: 1160[Submit] ...

  7. php中ajax实例,用到json

    调用的博客园苏恒锋的文章.先收藏,在学习: http://www.cnblogs.com/in-loading/archive/2012/05/18/2508123.html 程序中两个文件jsonT ...

  8. django入门-初窥门径-part1

    尊重作者的劳动,转载请注明作者及原文地址 http://www.cnblogs.com/txwsqk/p/6510917.html 完全翻译自官方文档 https://docs.djangoproje ...

  9. Leetcode 102 二叉树的层次遍历 Python

    二叉树的层次遍历 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如: 给定二叉树: [3,9,20,null,null,15,7],   3   / \ 9 20 ...

  10. 总结day12 ----装饰器

    一,什么是装饰器? 装饰器本质上就是一个python函数,他可以让其他函数在不需要做任何代码变动的前提下,增加额外的功能,装饰器的返回值也是一个函数对象. 装饰器的应用场景:比如插入日志,性能测试,事 ...