js动画(二)
嗯,今天好冷,特别冷,我的手指,都冻的打不了字了。今天一件特别的傻的事就是,在 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动画(二)的更多相关文章
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- [学习笔记]js动画实现方法,作用域,闭包
一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
- Web高性能动画及渲染原理(1)CSS动画和JS动画
目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...
- 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画
[摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...
- jquery实现一些小动画二
jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...
- js动画---一个小bug的处理
对于前面的课程,大家似乎看不出来存在什么问题,一切都很顺利,但是其实是存在一个很大的bug的,这个bug是什么呢?? 我们来看看下面这个程序就知道了 <!DOCTYPE html> < ...
- 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
- Vue中Js动画 与Velocity.js 多组件多元素 列表过渡
Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...
随机推荐
- 疯狂html5演讲(两):HTML5简经常使用的元素和属性(一个):html5保留经常使用的元素
html5取出一小部分的元素和属性:主要删除的各种元素和属性与文档相关的风格.例<font>.width等待,html5建议规范css样式表来控制html文档样式. 1.基本元素 < ...
- C#中使用消息队列RabbitMQ
在C#中使用消息队列RabbitMQ 2014-10-27 14:41 by qy1141, 745 阅读, 2 评论, 收藏, 编辑 1.什么是RabbitMQ.详见 http://www.rabb ...
- 让Xcode Lua 语法高亮
本人不太喜欢用code ide 还是喜欢XCODE的风格 1.让Xcode支援Lua语法高亮(Syntax Highlighting) 1. 下载https://github.com/breinhar ...
- mysql 基础之CURD
原文:mysql 基础之CURD 增删改查基本语法学习 增: insert Insert 3问: 1: 插入哪张表? 2: 插入哪几列? 3: 这几列分别插入什么值? Insert into Tabl ...
- EF6.0执行sql存储过程案例
数据填充实体:ZF_Btns; 存储过程名称:test; --方式一: db.Database.SqlQuery<ZF_Btns>("test @Id,@UName output ...
- Tomcat源码学习一
这段时间工作不太忙,所以抽时间学习了TOMCAT, TOMCAT实际就是负责保持TCP连接传递到部署的项目中.浏览器实质就是TCP发送器.将用户的请求封装成TCP发送请求.当然格式是双方协定的.使用的 ...
- 实现基本的CRUD功能
文] 使用 MVC 5 的 EF6 Code First 入门 系列:实现基本的CRUD功能 2014-04-28 16:29 by Bce, 428 阅读, 0 评论, 收藏, 编辑 英文渣水平,大 ...
- 3 MySQL SQL基础
目录 1. SQL概述2. 数据库操作3. 表操作4. 记录操作 1. SQL概述 SQL,结构化查询语言(Structured Query Language),一种数据库查询和程序设计语言,用于存取 ...
- .NET:线程本地存储、调用上下文、逻辑调用上下文
.NET:线程本地存储.调用上下文.逻辑调用上下文 目录 背景线程本地存储调用上下文逻辑调用上下文备注 背景返回目录 在多线程环境,如果需要将实例的生命周期控制在某个操作的执行期间,该如何设计?经典的 ...
- Apache HttpServer Installing the apache2.2 service <OS 5>拒绝访问. :Failed to open the WinNT service manager
Installing the apache2.2 service<OS 5>拒绝访问. :Failed to open the WinNT service manager 只需要于管理员 ...