                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

求大神看看怎么沒反應

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>無標題文檔</title>

padding:0;

margin:0;

}

#div1{

width:200px;

height:200px;

background-color:red;

filter:Alpha(opactiy=30);

opacity:0.3;

}

</style>

window.onload=function(){

var odiv=document.getElementById(div1);

odiv.onmouseover=function(){

starmove(100)

}

odiv.onmouseout=function(){

starmove(30)

}

var timer;

var alpha=30;

function starmove(iTarget){

var odiv=document.getElementById(div1);

clearInterval(timer);

timer=setInterval(function(){

var speed=0;

if(alpha>iTarget){

? ?speed=-10;

? ? ? ? }else{

? ?speed=10;

? ? ? ? }

if(alpha==iTarget){

clearInterval(timer);

}else{

alpha=alpha+speed;

odiv.style.filter="alpha(opactiy:alpha)";

odiv.style.opactiy=alpha/100;

}},30)

}

</script>

</head>

<body>

</div>

</body>

</html>

李李晨晨

2016-06-12

源自：JS動畫效果 2-2

關注問題我要回答

657

操作

收起

2 回答

qq_幸福不缺氧_03691061
2016-08-12

上樓已經說得很清楚了哦，需要在這一句做修改 obj.style.filter='alpha(opacity:'+alpha+')';

這里需要將變量alpha 給對象的filter；最后個人覺得需要，obj.style.opacity=parseFloat(alpha/100);

0 回復有任何疑惑可以回復我~

收起回答

qq_相顧無言_8
2016-06-12

<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8">
????????<title></title>
????????<style?type="text/css">
????????????body,div{
????????????????margin:?0;
????????????????padding:?0;
????????????}
????????????#div1{
????????????????height:?200px;
????????????????width:?200px;
????????????????background:?red;
????????????????opacity:?0.3;
????????????????filter:?alpha(opacity:30);
????????????}
????????</style>
????????<script>
????????????window.onload=function(){
????????????????var?odiv=document.getElementById('div1');
????????????????odiv.onmousemove=function(){
????????????????????startMove(100);
????????????????}
????????????????odiv.onmouseout=function(){
????????????????????startMove(30);
????????????????}
????????????}
????????????var?timer=null;
????????????var?alpha=30;
????????????function?startMove(iTarget){
????????????????clearInterval(timer);
????????????????var?odiv=document.getElementById('div1');
????????????????
????????????????var?speed=0;
????????????????timer?=?setInterval(function(){
????????????????if(alpha>iTarget){
????????????????????speed=-10;
????????????????}
????????????????else{speed=10;}
????????????????????
????????????????
????????????????if(alpha==iTarget){
????????????????????clearInterval(timer);
????????????????}
????????????????else{
????????????????????alpha+=speed;
????????????????????odiv.style.filter='alpha(opacity:'+alpha+')'//基于IE的
????????????????????odiv.style.opacity=alpha/100;}
????????????????},30)
????????????}
????????</script>
????</head>
????<body>
????????<div?id="div1">
????????????
????????</div>
????</body>
</html>