1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <style>
  7. div{width:100px;height:100px;background:red;filter:alpha(opacity=100);opacity:1;}
  8. </style>
  9. <script>
  10.     function getStyle(obj,attr){
  11.         return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj)[attr];
  12.     }
  13.     function perfectStartMove(obj,json){
  14.         clearInterval(obj.timer);
  15.         obj.timer = setInterval(function(){
  16.             var bStop = true;
  17.             for(var attr in json){
  18.                 if(attr == 'opacity'){
  19.                     var iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
  20.                 }else{
  21.                     var iCur = parseInt(getStyle(obj,attr));
  22.                 }
  23.                 var speed = (json[attr]-iCur)/8;
  24.                 speed = speed >0 ? Math.ceil(speed):Math.floor(speed);
  25.                 if(iCur != json[attr]){
  26.                     bStop = false;
  27.                 }
  28.                 if(attr == 'opacity'){
  29.                     obj.style.filter = 'alpha(opacity='+(iCur+speed)+');';
  30.                     obj.style[attr] = (iCur+speed)/100;
  31.                 }else{
  32.                     obj.style[attr] = iCur+speed+'px';
  33.                 }
  34.             }
  35.             if(bStop){
  36.                 clearInterval(obj.timer);
  37.             }
  38.  
  39.         },30);
  40.     }
  41.     window.onload = function(){
  42.         var arrInput = document.getElementsByTagName('input')[0];
  43.         var arrDiv = document.getElementsByTagName('div')[0];
  44.         var onOff = true;
  45.         arrInput.onclick = function(){
  46.             if(onOff){
  47.                 perfectStartMove(arrDiv,{width:300,height:300,opacity:30});
  48.             }else{
  49.                 perfectStartMove(arrDiv,{width:100,height:100,opacity:100});
  50.             }
  51.             onOff = !onOff;
  52.         };
  53.     };
  54.  
  55. </script>
  56. </head>
  57.  
  58. <body>
  59. <input type='button' value = '开始运动'/>
  60. <div></div>
  61. </body>
  62. </html>

js 完美运动框架的更多相关文章

  1. JS完美运动框架

    这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...

  2. JS完美运动框架【利用了Json】

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 完美运动框架(js)

    一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){ cl ...

  4. JS 之完美运动框架

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

  5. 【repost】JavaScript完美运动框架的进阶之旅

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

  6. JavaScript “完美运动框架”

    /* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height ...

  7. 2015.8.2js-19(完美运动框架)

    /*完美运动框架*/ //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity f ...

  8. Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理

    大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...

  9. 纯js写“运动”框架

    所谓“运动”不一定真的是运动,在连续的一段时间内改变某一样式都可以成为“运动”. 先写几个会用到的函数 //获取某一元素的指定样式 function getstyle (element, target ...

随机推荐

  1. Office 365 的安装方法

    一.在线安装 进入网址 https://www.office.com/ 使用office账号登陆 1.点击右上角安装office应用,选择第二项 其他安装选项 2.选择安装语言 点击高级,选择安装版本 ...

  2. better-scroll插件的介绍及使用

    在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,可以是竖向滚动的列表,也可以是横向的,用better-scroll可以帮助我们实现这个 什么是 better-scroll better ...

  3. Qt char * 与 const char * 的转换

    char *ch1="hello11"; const char *ch2="hello22"; ch2 = ch1;//不报错,但有警告 ch1 = (char ...

  4. VisionPro 图标工具说明

  5. 微软研究员Eric Horvitz解读 “人工智能百年研究”

    本文翻译自ScienceInsider"A 100-year study of artificial intelligence? Microsoft Research's Eric Horv ...

  6. Centos_7安装python-pip

    使用yum -y install python-pip安装pip时,会报出”No package python-pip available.“. 使用命令: yum -y install epel-r ...

  7. 解决Eclipse和MyEclipsejava.lang.OutOfMemoryError Java heap space的错误

    Eclipse和MyEclipse出现错误:java.lang.OutOfMemoryError: Java heap space的错误,很熟悉的错误信息,可咋就想不起来在哪里设JVM的参数啊.请看下 ...

  8. 传统if 从句子——以条件表达式作为if条件

    传统if 从句子——以条件表达式作为 if条件if [ 条件表达式 ]then command command commandelse command commandfi   条件表达式 文件表达式 ...

  9. python基础修改haproxy配置文件

    1.通过eval(),可以将字符串转为字典类型. 2.Encode过程,是把python对象转换成json对象的一个过程,常用的两个函数是dumps和dump函数.两个函数的唯一区别就是dump把py ...

  10. XML的四种解析器(dom_sax_jdom_dom4j)原理及性能比较[收藏]

    1)DOM(JAXP Crimson解析器)    DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信息片断的集合.这个层次结构允许开发人员在树中寻找特定 ...