慕粉3598352
2016-07-21 13:08
<!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> </head> <script> window.onload=function(){ var ali=document.getElementsByTagName('li'); for(var i=0;i<ali.length;i++) { ali[i].alpha=30; ali[i].time=null; ali[i].onmouseover=function(){var g=this;startmove(g,'width',200,function(){startmove(g,'opacity',100)});} ali[i].onmouseout=function(){var g=this;startmove(g,'opacity',30,function(){startmove(g,'width',100)});} } //var alpha=30; function getStyle(obj,attr){ if(obj.currentStyle) return obj.currentStyle[attr]; else{ return getComputedStyle(obj,false)[attr]; } } function startmove(obj,attr,target,fn){ clearInterval(obj.time); obj.time=setInterval(function(){ var icon=0; if(attr=='opacity'){ icon=Math.round(parseFloat(getStyle(obj,attr))*100); } else { icon=parseInt(getStyle(obj,attr)); } var speed=(target-icon)/10; speed>0?Math.ceil(speed):Math.floor(speed); if(icon==target) { clearInterval(obj.time); if(fn) {fn();} } else{ if(attr=='opacity') { obj.alpha+=speed; obj.style.filter='alpha(opacity:'+icon+speed+')'; obj.style.opacity=(icon+speed)/100;} else obj.style[attr]=icon+speed+'px'; } },30) } } </script> <style> li{width:100px;height:100px;list-style:none;margin:10px;background-color:#F00;filter:alpha(opacity:30);opacity:0.3;} </style> <body> <div> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
ali[i].onmouseover=function(){startmove(this,'width',400,function(){startmove(ali[0],'height',400);});}
问题出在第二个function中的this,若改为指定的某个ali[0],就可以执行
----JS部分
function startMove(obj,attr,mu,fn){//fn为再传一个函数
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var x=0;
if(attr=='opacity'){
x=parseFloat(getstyle(obj,attr))*100;
}else{
x=parseInt(getstyle(obj,attr));
}
var speed=(mu-x)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(x==mu){
clearInterval(obj.timer);
if(fn){
fn();
}
}else{
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(x+speed)+')';
obj.style.opacity=(x+speed)/100
}
obj.style[attr]=x+speed+'px';
}
},50);
}
function getstyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else
{
return getComputedStyle(obj,false)[attr];
}
}
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>
*{margin:0; padding:0;}
ul{list-style:none;}
ul li{
width:200px;
height:100px;
background-color:#0F0;
margin-bottom:10px;
border:5px solid #000;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script src="kj.js"></script>
<script>
window.onload=function(){
var Li=document.getElementById('li1');
Li.onmouseover=function(){
startMove(Li,'width',400,function(){
startMove(Li,'height',400,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>
这我写的你参考一下,而且我这个和老师一样的
JS动画效果
113925 学习 · 1443 问题
相似问题