綜合了透明和多物體運動效果但是還是有點問題能幫我看一下嗎？
<title>多物體運動</title>
<style>
body,ul,li{
padding:0;
margin:0;
}
ul,li{
list-style:none;
}
ul li{
width:200px;
height:100px;
background:#FF0;
margin-bottom:20px;
filter:alpha(opacity:30);
? ? opacity:0.3;
}
</style>
<script>
? ? window.onload= function(){
var aLi= document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].timer=null;
aLi[i].alpha=30;
aLi[i].onmouseover=function(){
startMove(this,400,100)
}
aLi[i].onmouseout=function(){
startMove(this,200,30)
}
}
}
//var timer=null;
function startMove(obj,iTarget,style){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed = (iTarget-obj.offsetWidth)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);?
if(obj.offsetWidth == iTarget){
clearInterval(obj.timer);
}
else{
obj.style.width = obj.offsetWidth+speed+'px';
}
var app = 0;
? ? ? ? ? ? if(obj.alpha>style){
? ? ? ? ? ? ? ? app = -10;
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? app = 10;
? ? ? ? ? ? }
? ? ? ? ? ? if(obj.alpha == style){
? ? ? ? ? ? clearInterval(obj.timer)
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? obj.alpha+=app;
? ? ? ? ? ? obj.style.opacity = obj.alpha/100
? ? ? ? ? ? }
},30);
}
</script>
</head>
<body>
<ul>
? ? <li></li>
? ? <li></li>
? ? <li></li>
</ul>
</body>
</html>
物體的長度還是有問題，鼠標碰了過后有的會變長
2015-06-08
其實是你的透明度變得比長度快,所以關閉了整個計時器,長度還沒變回來
2016-10-20
<!DOCTYPE html>
<html>
<head>
?? ?<meta chsrset="utf-8" />
?? ?<title>11</title>
<style>
?? ?body,ul,li{
?? ??? ?padding:0;
?? ??? ?margin:0;
?? ?}
?? ?ul,li{
?? ??? ?list-style:none;
?? ?}
?? ?ul li{
?? ??? ?width:200px;
?? ??? ?height:100px;
?? ??? ?background:#FF0;
?? ??? ?margin-bottom:20px;
?? ??? ?filter:alpha(opacity:30);
?? ??? ?opacity:0.3;
}
</style>
<script>
??? window.onload= function(){
?? ??? ?var aLi= document.getElementsByTagName('li');
?? ??? ?for(var i=0;i<aLi.length;i++){
?? ??? ??? ?aLi[i].timer1=null;
?? ??? ??? ?aLi[i].timer2=null;
?? ??? ??? ?aLi[i].alpha=30;
?? ??? ??? ?aLi[i].onmouseover=function(){
?? ??? ??? ??? ?startMove(this,400,100)
?? ??? ??? ?}
?? ??? ??? ?aLi[i].onmouseout=function(){
?? ??? ??? ??? ?startMove(this,200,30)
?? ??? ??? ?}
?? ??? ?}
?? ?}
?? ?function startMove(obj,iTarget,style){
?? ??? ?clearInterval(obj.timer1);
?? ??? ?clearInterval(obj.timer2);
?? ??? ?obj.timer1=setInterval(function(){
?? ??? ??? ?var speed = (iTarget-obj.offsetWidth)/8;
?? ??? ??? ?speed = speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ??? ?if(obj.offsetWidth == iTarget){
?? ??? ??? ??? ?clearInterval(obj.timer1);
?? ??? ??? ?}
?? ??? ??? ?else{
?? ??? ??? ??? ?obj.style.width = obj.offsetWidth+speed+'px';
?? ??? ??? ?}
?? ??? ?},30);
?? ??? ?obj.timer2=setInterval(function(){
?? ??? ??? ?var app = 0;
??????????? if(obj.alpha>style){
??????????????? app = -10;
??????????? }
??????????? else{
??????????????? app = 10;
??????????? }
??????????? if(obj.alpha == style){
?????????? ??? ?clearInterval(obj.timer2);
??????????? }
??????????? else{
????????? ??? ??? ?obj.alpha+=app;
?????????? ??? ?obj.style.opacity = obj.alpha/100;
??????????? }
?? ??? ?},30)
?? ?}
</script>
</head>
<body>
<ul>
??? <li></li>
??? <li></li>
??? <li></li>
</ul>
</body>
</html>
這樣可以。
2015-06-06
當然會變了 你自己給加了樣式