改了以后还是有到不了目标属性
隳裒
2016-03-27 19:45
<!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 type="text/css">
*{ margin:0; padding:0}
ul,li{ list-style:none}
ul li{
background:#FF0;
width:200px;
height:100px;
border:4px solid #F0F;
margin-bottom:10px;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
</head>
<script src="JS/move.js"></script>
<script>
window.onload=function(){
var oli=document.getElementById('a');
oli.onmouseover=function(){
startMove(oli,
{'width':400,'height':200,
'opacity':100});
}
oli.onmouseout=function(){
startMove(oli,
{'width':200,'height':100,
'opacity':30});
}
}
</script>
<body>
<ul>
<li id="a"></li>
</ul>
</body>
</html>
move.js
// JavaScript Document oli[i].timer=null; oli[i].alpha=30;
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn){//iTarget目标值
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json ){
var flag=true;//假设所有运动到达终点
var sty=0;
if(attr=='opacity'){
sty=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
sty=parseInt(getStyle(obj,attr));
}
//算速度
var speed=(json[attr]-sty)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//检测停止
if(sty!=json[attr])
{
flag=false;
}
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(sty+speed)+')';
obj.style.opacity=(sty+speed)/100;
}
else{
obj.style[attr]=sty+speed+'px';
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30)
}
1回答
-
- 隳裒
- 2016-03-27 19:49:27
。。改好了
JS动画效果
113923 学习 · 1443 问题
相似问题