注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

js运动框架:完美运动框架(实现多种运动同时进行json)  

2014-02-16 21:57:57|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

效果图:
完美运动框架(实现多种运动同时进行json) - 湖小叶叶 - 米欧光影工作室
 
用json实现多种变化同时进行。
比如,同时变化高度、宽度、透明度、边框粗细等。



代码(最后又附加了一个链式运动——变宽):
js/move.js

// JavaScript Document

/*
*获取对象obj的当前属性attr的值
*/
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}



/*
*对象obj按照运动集合json,同时运动,然后可以执行函数fn
*
*/
function startJSONMove(obj, json, fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var bStop=true; //这一次运动就结束了——所有的值都到达了
for(var attr in json)
{
//1.取当前的值
var iCur=0;

if(attr=='opacity')
{
iCur=parseInt(parseFloat(Math.ceil(getStyle(obj, attr)*100 )));//防止透明度抖动的代码, 使用了向上去顶的Math.ceil(x)。
}
else
{
iCur=parseInt(getStyle(obj, attr));
}

//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

//3.检测停止
if(iCur!=json[attr])
{
bStop=false;
}


if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}



if(bStop)
{
clearInterval(obj.timer);
{
if(fn)
fn();
}

}
}, 30)
}








index.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>json实现同时运动</title>

<script src="js/move.js" ></script>
<script>
window.onload=function()
{
var wjl=0;
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function()
{
startJSONMove(oDiv, {width: 200, height: 200, opacity: 100, left: 20}
//{width: 102, height: 200, opacity: 100, left: 20}

, function(){startJSONMove(oDiv, {width: 400});}


);
}
oDiv.onmouseout=function()
{
startJSONMove(oDiv, {width: 200},
function(){startJSONMove(oDiv, {width: 100, height: 100, opacity: 30, left: 0})} );
}
}
</script>
<style>
#div1 {
width:100px; height:100px;

background:#0096ff;
position:absolute; left:0;

filter:alpha(opacity=30); opacity:0.30;
}
</style>
</head>

<body>

<h1>json同时运动——链式运动</h1>

<hr />

<div id="div1">123</div>
</body>
</html>





--
http://blog.sina.com.cn/s/blog_6993fb0f01013rqv.html
完美运动框架(实现多种运动同时进行json)
  评论这张
 
阅读(468)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017