运动框架实现思路:

  1、速度(改变值:left , right , width , height , opacity)

  2、缓冲运动

  3、多物体运动

  4、任意值改变

  5、链式运动

  6、同时运动

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

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js用currentStyle和getComputedStyle获取css样式</title>
<style type="text/css">
#div1{width:100px; height:100px; background:red;}
</style>
<script type="text/javascript">
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}
window.onload=function()
{
var oDiv=document.getElementById('div1');
alert(getStyle(oDiv,'width'))
}
</script>
</head> <body>
<div id="div1"></div>
</body>
</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. IE hack

    .hack{ color:#fff;background:#; background:#06f\; /* all IE */ background:#\; /* IE8-9 */ background ...

  2. DOM的相关优化

    为什么要进行DOM优化? DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint). 首先先说一些 ...

  3. C,C++经典笔试题(答案)转自:http://blog.163.com/jianhuali0118@126/blog/static/377499702008230104125229/

    一.请填写BOOL , float, 指针变量 与“零值”比较的 if 语句.(10分) 请写出 BOOL   flag 与“零值”比较的 if 语句.(3分) 标准答案:      if ( fla ...

  4. caffe学习系列(3):数据层介绍

    一个模型由多个层构成,如Data,conv,pool等.其中数据层是模型的最底层,是模型的入口. 提供数据的输入,也提供数据从Blobs转换成别的格式进行保存输出还包括数据的预处理(如减去 均值, 放 ...

  5. 3. Android程序生成步骤

      主要流程如下图所示:       所需要的工具列表 名称 功能介绍 在操作系统中的路径 aapt Android资源打包工具 ${ANDROID_SDK_HOME}/platform-tools/ ...

  6. IP转换成LONG 的 问题

    如何将四个字段以点分开的IP网络址协议地址转换成整数呢?PHP里有这么一个函数ip2long.比如 <?php echo ip2long("10.2.1.3"); ?> ...

  7. 在eclipse上开发hadoop2.5.2程序的快捷方法

    本文仍然使用MapReduce的经典例子 WordCount来测试eclipse的开发环境. 与大部分教程不同的是,本文使用的hadoop是2.5.2的版本,相较于之前的0.X版本,hadoop 2. ...

  8. 【leetcode】Integer to Roman

    Integer to Roman Given an integer, convert it to a roman numeral. Input is guaranteed to be within t ...

  9. RecyclerView notifyDataSetChanged不起作用

    一般listview设置完data后调用notifyDataSetChanged便可刷新布局界面,然而recycleview调用这个方法却没有任何反应.对于很多不熟悉recycleview的话很容易躺 ...

  10. JStorm集群的部署

    JStorm是一个类似Hadoop MapReduce的系统,不同的是JStorm是一套基于流水线的消息处理机制,是阿里基于Storm优化的版本,和Storm一样是一个分布式实时计算的系统,从开发角度 ...