运动框架实现思路：

　　1、速度（改变值：left , right , width , height , opacity）

　　2、缓冲运动

　　3、多物体运动

　　4、任意值改变

　　5、链式运动

　　6、同时运动

js用currentStyle和getComputedStyle获取css样式（非行间）
　　用js的style属性可以获得html标签的样式，但是不能获取非行间样式。那么怎么用js获取css的非行间样式呢？在IE下可以用currentStyle，而在火狐下面我们需要用到getComputedStyle。下面是一个小示例：

  1.     <html xmlns="http://www.w3.org/1999/xhtml">
  2.     <head>
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title>js用currentStyle和getComputedStyle获取css样式</title>
  5.     <style type="text/css">
  6.     #div1{width:100px; height:100px; background:red;}
  7.     </style>
  8.     <script type="text/javascript">
  9.     function getStyle(obj, attr)
  10.     {
  11.         if(obj.currentStyle)
  12.         {
  13.             return obj.currentStyle[attr];
  14.         }
  15.         else
  16.         {
  17.             return getComputedStyle(obj,false)[attr];
  18.         }
  19.     }
  20.     window.onload=function()
  21.     {
  22.         var oDiv=document.getElementById('div1');
  23.         alert(getStyle(oDiv,'width'))
  24.     }
  25.     </script>
  26.     </head>  
  27.  
  28.     <body>
  29.     <div id="div1"></div>
  30.     </body>
  31.     </html>

二、JavaScript语言--JS动画--JS动画效果的更多相关文章

  1. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  2. two.js之实现动画效果

    一.什么是two.js? Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁 ...

  3. window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

    window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...

  4. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  5. 二、JavaScript语言--JS基础--JavaScript入门篇

    1.如何插入JS 使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<scri ...

  6. three.js 自制骨骼动画（二）

    上一篇说了一下自制骨骼动画,这一篇郭先生使用帧动画让骨骼动画动起来.帧动画是一套比较完善的动画剪辑方法,详细我的api我们就不多说了,网上有很多例子,自行查找学习.在线案例请点击博客原文.话不多说先上 ...

  7. JS模拟CSS3动画-贝塞尔曲线

    一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...

  8. javascript实现汉诺塔动画效果

    javascript实现汉诺塔动画效果 当初以为不用html5也很简单,踩了javascript单线程的大坑后终于做出来了,没事可以研究下,对理解javascript的执行过程还是很有帮助的,代码很烂 ...

  9. javascript仿天猫加入购物车动画效果

    javascript仿天猫加入购物车动画效果   注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...

  10. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

随机推荐

  1. linux安装包地址备忘

    64位系统安装包: http://mirrors.163.com/centos/5/os/x86_64/CentOS/ 32位系统安装包: http://mirrors.163.com/centos/ ...

  2. Android应用中返回键的监听及处理

    MainActivity: package com.testnbackpressed;  import android.os.Bundle;  import android.view.KeyEvent ...

  3. Oracle 10G select工作原理

    数据库查询语句内部执行过程 select * from  table 步骤 分析阶段(parse) 1.共享池库高速缓存有没有该语句.如果有直接返回结果. 2.语法分析sql语句是否正确进行下一步分析 ...

  4. 剑指Offer 矩形覆盖

    题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法?   解法,还是斐波那契数列   AC代码: class So ...

  5. Python自动化之pickle和面向对象初级篇

    pickle模块扩展 1 pickle之文件操作 示例1 with open("test", 'rb') as f: lines = f.readlines() print(pic ...

  6. Maven打包附加配置文件

    在build节点下增加resources. <build> <!-- 资源 --> <resources> <!-- 复制非class文件 --> &l ...

  7. Objective C 快速入门学习三

    1.数据类型 和C语言基本一样. 有一个特别数据类型id,可以储存任何类型的对象,它是实现多态和动态绑定的基础. Objective-C 2.程序结构 Objective-C和C的程序结构一模一样,具 ...

  8. 【iOS开发-22】navigationBar导航条和navigationItem设置：基本搞定导航条上的文字和按钮以及各种跳转

    http://blog.csdn.net/weisubao/article/details/39646739?utm_source=tuicool&utm_medium=referral (1 ...

  9. 【leetcode】Validate Binary Search Tree

    Validate Binary Search Tree Given a binary tree, determine if it is a valid binary search tree (BST) ...

  10. Light OJ 1068

    数位DP #include <cstdio> #include <cstring> using namespace std; ; ; long long n; int f[MA ...