js 框架:

function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
} function startMove(obj,json,fn){
var flag = true;//如果
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json)
{
//取当前值
var icur = 0;
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur = parseInt(getStyle(obj,attr))
}
//算速度
var speed = (json[attr]-icur)/8;
speed = speed >0? Math.ceil(speed):Math.floor(speed);
//检測停止
if(icur != json[attr]){
flag = false;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(icur +speed)+')';
obj.style.opacity = (icur + speed)/100;
}
else{
obj.style[attr] = icur + speed + 'px';
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30)
}

链式动画(前一个动作完毕。后一个动作继续):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链式框架</title>
<style>
body,ul,li{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
ul li{
width:200px;
height:100px;
margin-bottom:10px;
background:yellow;
border: 4px solid #000;
filter:alpha(opacity:30);
opacity: 0.3;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function(){
var li = document.getElementById('li1');
li.onmouseover = function(){
startMove(li,'width',400,function(){
startMove(li,'height',200,function(){
startMove(li,'opacity',100);
});
});
}
li.onmouseout = function(){
startMove(li,'opacity',30,function(){
startMove(li,'height',100,function(){
startMove(li,'width',200);
});
});
}
}
</script>
</head> <body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>

同一时候动画(多个动作同一时候完毕):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>同一时候动画</title>
<style>
body,ul,li{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
ul li{
width:200px;
height:100px;
margin-bottom:10px;
background:yellow;
border: 4px solid #000;
filter:alpha(opacity:30);
opacity: 0.3;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function(){
var oli = document.getElementById('li1');
oli.onmouseover = function(){
startMove(oli,{width:400,height:200,opacity:100});
}
oli.onmouseout = function(){
startMove(oli,{width:200,height:100,opacity:30});
}
}
</script>
</head> <body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>

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

  1. js动画学习(五)

    九.多属性同时运动 前面的例子都是每个属性单独运动,如果想要多属性同时运动怎么办?比如,我想要一个div的onmouseover事件中宽和高同时变化.下面这个函数是单独变宽: window.onloa ...

  2. js动画(四)

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

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

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

  4. JS神经网络deeplearn.js:浏览器端机器智能框架

    JS神经网络deeplearn.js:浏览器端机器智能框架 通过 deeplearn.js,可以实现在浏览器中训练神经网络模型,也可在推理阶段运行预训练模型. deeplearn.js 以 TypeS ...

  5. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  6. Ember.js和Vue.js对比,哪个框架更优秀?

    本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript最初是为Web应用程序创建的.但是随着前端技术的 ...

  7. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  8. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  9. CSS VS JS动画,哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

随机推荐

  1. 【shell】创建长目录,目录存在则忽略,缺失则创建

    有时候,我们需要创建一个空目录树,如果给定路径包含目录,那么还必须检查这些目录是否存在: mkdir –p /qinys/oliver/tmp/ 执行上述命令即可创建长目录,并且有则忽略,无则创建原则 ...

  2. Xml中SelectSingleNode方法中的xpath用法

    https://blog.csdn.net/wf520pb/article/details/2644549 最常见的XML数据类型有:Element, Attribute,Comment, Text. ...

  3. java中pojo、dao命名解释

    POJO::POJO(Plain Ordinary Java Object)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJB混淆所创造的简称. 使用POJO名称是为了避免和EJB ...

  4. Eclipse中10个最有用的快捷键组合(转)

    Eclipse中10个最有用的快捷键组合   一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到提升.   ...

  5. MM bound 与 Jensen's inequality

    MM bound 与 Jensen's inequality 简森不等式 在使用最大似然估计方法求解模型最优解的时候,如果使用梯度下降(GD or SGD)或者梯度上升(GA or SGA),可能收敛 ...

  6. 【LeetCode】208. Implement Trie (Prefix Tree)

    Implement Trie (Prefix Tree) Implement a trie with insert, search, and startsWith methods. Note:You ...

  7. php安装 出现Sorry, I cannot run apxs. ***错误解决方法

    # tar zvxf php-5.1.2.tar.gz# cd php-5.1.2# ./configure --prefix=/usr/local/php --with-mysql=/usr/loc ...

  8. Android开发网上的一些重要知识点[经验分享]

    1. android单实例运行方法 我们都知道Android平台没有任务管理器,而内部App维护者一个Activity history stack来实现窗口显示和销毁,对于常规从快捷方式运行来看都是s ...

  9. C# 因IIS回收导致定时器失效的解决方案

    首先不要设置iis自动回收,一般设置凌晨1-2点左右回收一次,当凌晨iis回收应用程序池的时候,会调用Application_End,执行里面的代码, 重新启动网站,建议定时器的代码放在Session ...

  10. 【MyBatis】MyBatis之别名typeAliases标签的使用

    <configuration> <typeAliases> <typeAlias alias="Dept" type="cn.xdl.ent ...