js 动画3 完美框架
2024-10-19 00:21:19
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>
最新文章
- php并发编程相关扩展
- CSS实时编辑显示
- SVN学习之参数定义及设置
- c#自动更新+安装程序的制作 （转）
- 1.1HTML的基本概念
- C#系列教程——lock语句定义及使用
- OR扩展
- 制作与使用静态链接库（.lib）文件
- IoC in Spring
- tt程序分析（一）
- Centos小白命令
- 2013 HTML5中国峰会演讲：Android上的HTML5:过去,现在和将来
- Linux下Springboot解决`APR based Apache Tomcat Native library`提示
- mysql系列一、mysql数据库规范
- php 中 get_cfg_var() 与 ini_get() 的异同
- Appium+python自动化环境搭建（小白适用）
- 这样的UX设计师简历，HR分分钟给你来电话
- SupperSocket深入浅出
- 2-sat基础题 BZOJ 1823
- flask-login的简单实用