<!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>無標(biāo)題文檔</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>
2016-07-22
ali[i].onmouseover=function(){startmove(this,'width',400,function(){startmove(ali[0],'height',400);});}
問題出在第二個function中的this，若改為指定的某個ali[0]，就可以執(zhí)行
2016-07-22
----JS部分
function startMove(obj,attr,mu,fn){//fn為再傳一個函數(shù)
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>無標(biāo)題文檔</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>
這我寫的你參考一下，而且我這個和老師一樣的