嗯,今天好冷,特别冷,我的手指,都冻的打不了字了。今天一件特别的傻的事就是,在 for(var i;i<obj.length;i++){}

找了半天没有注意到 var i 没有赋值。够150 了吧。

直接上货吧!!!

哎,还没有够150 ,那就再搞一个吧,当与彩蛋。

用一个方法直接获取样式值

function getStyle(obj,attr){/*obj对象,就是你要搞哪个元素,attr属性,你要搞哪个的属性*/

if(obj.currentStyle){

return obj.currentStyle[attr];/*.currentStyle针对IE*/

}

else{

return getComputedStyle(obj,flase)[attr];/* getComputedStyle针对firebox浏览器*/

}

}

多物体变速(匀速)运动

<script>
window.onload=function(){
var ind = document.getElementsByTagName("li");
for(var i=0;i<ind.length;i++){/*取到多个物体*/
ind[i].timer=null;/*当遇到多个对象时,最好不用全局变量,可能会发生争夺现象*/
ind[i].onmouseover = function(){
onMove(this,400,10); /*这里控制,对象,目标值,速度*/
}
ind[i].onmouseout = function(){
onMove(this,200,-10);
}
}
}
function onMove(obj,mu,speed){
clearInterval(obj.timer); obj.timer=setInterval(function(){ speed=(mu-obj.offsetWidth)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
/*变速在这里,两行,删除直接是 匀速*/
if(obj.offsetWidth == mu)
{
clearInterval(obj.timer);
}
else{
obj.style.width=obj.offsetWidth+speed+"px";
}
},30)
}
</script>

多物体透明度运动

<script>
window.onload=function(){
var opp = document.getElementsByClassName("page");
for(var i=0;i<opp.length;i++){ opp[i].timer=null;
opp[i].a=30; /*透明度,没有直接获取当前透明度的方法,所以自生成*/ opp[i].onmouseover = function(){
onStart(this,100,5);/*这里控制对象,目标值,速度*/
}
opp[i].onmouseout = function(){
onStart(this,30,-5);
}
}
}
function onStart(obj,mu,speed){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(obj.a == mu){
clearInterval(obj.timer);
}
else{
obj.a+=speed;
obj.style.opacity=(obj.a)/100;
}
},10)

  

js动画(二)的更多相关文章

  1. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  2. [学习笔记]js动画实现方法,作用域,闭包

    一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...

  3. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  4. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

  5. Web高性能动画及渲染原理(1)CSS动画和JS动画

    目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...

  6. 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  7. jquery实现一些小动画二

    jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...

  8. js动画---一个小bug的处理

    对于前面的课程,大家似乎看不出来存在什么问题,一切都很顺利,但是其实是存在一个很大的bug的,这个bug是什么呢?? 我们来看看下面这个程序就知道了 <!DOCTYPE html> < ...

  9. 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

  10. Vue中Js动画 与Velocity.js 多组件多元素 列表过渡

    Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...

随机推荐

  1. PHP 6:PHP 基本数据类型

    原文:PHP 6:PHP 基本数据类型 本章将介绍PHP基本类型.相信我们已经熟悉了C/C++,C#或者Java里的任意一种语言.本章会以C#为比较语言.OK,如果你想学PHP,你最先考虑的是什么呢? ...

  2. 工欲善其事:编辑器之神Vim(一)

    本篇文章收集了Vim最常用和实用的一些命令,掌握这些命令就可以使用Vim了 本文仅列举个人认为常用的命令,本系列文章更像是自己的学习笔记,而不是VIM使用教程. 如果你想了解vim的更多,可以看看Co ...

  3. ubuntu安装nVidia驱动,遇到终端闪砾问题并解决

    安装nvidia的官方驱动之后,比起nouvean来说感觉速度快了不少. 安装该驱动很简单,但选择哪个驱动是要注意的.因为今天我试了nvidia的多个驱动后都在ubuntu下用起来并不好. 我现在的环 ...

  4. .Net Framework基础知识

    .net常识 .net framework是微软为开发应用程序而创建的一个富有革命性的新平台:   .net可以用来开发windows应用程序,web应用程序,web服务和其它各种类型的程序.   . ...

  5. javascript 学习总结(八)属性定义方法

    1.defineProperty /* 定义(Definition).定义属性需要使用相应的函数,比如: Object.defineProperty(obj, "prop", pr ...

  6. AngularJS+requireJS项目的目录结构设想

    AngularJS+requireJS项目的目录结构设想 准备用AngularJS + require.js 作为新项目的底层框架,以下目录结果只是一个初步设想: /default    放页面,不过 ...

  7. Javascript技巧实例精选(5)—显示当前的日期和时间

    用Javascript实现在屏幕中打印当前的日期和时间 >>点击这里下载完整html源码<< 这是显示的效果 目前的日期/时间是:Wed Sep 25 2013 23:40:0 ...

  8. HTTP/1.1与HTTP/1.0的区别

    HTTP/1.1与HTTP/1.0的区别 下面主要从几个不同的方面介绍HTTP/1.0与HTTP/1.1之间的差别,当然,更多的内容是放在解释这种差异背后的机制上. 1 可扩展性 可扩展性的一个重要原 ...

  9. C#里CheckListBox的全选

    for (int i = 0; i < chkLSelect.Items.Count; i++)            {                if (chkCheck.Checked ...

  10. Linux普通文件和设备的异同点

    众所周知,Linux下一切皆文件,文件包含数据,具有属性,通过目录中的名字被标识,可以从一个文件读取数据,写入另一个文件,而Linux把这写应用于设备. 请看如下普通文件和设备的对比: