                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫效果

鼠標(biāo)滑過(guò)時(shí)提示錯(cuò)誤，不知道哪里原因啊

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
??????*{
???????margin:?0;
???????padding:?0;
??????}
??????ul,li{
???????list-style:?none;
??????}
??????ul?li{
???????width:?200px;
???????height:?100px;
???????background:?yellow;
???????margin-bottom:20px;
???????filter:?alpha(opacity:30);
???????border:?4px?solid?#000;
???????filter:?alpha(opacity:30);
????????opacity:?0.3;
??????}
</style>
<script>
window.onload=function(){
????????var?Li1=document.getElementById('li1');
????????var?Li2=document.getElementById('li2');
????????Li1.onmouseover=function(){
??????????startMove(this,'opacity',100);
????????}
????????Li1.onmouseout=function(){
??????????startMove(this,'opacity',30);
????????}
????????
}
function?getStyle(obj,attr){
????????if(obj.currentStyle){
????????return?obj.currentStyle[attr];
????????}else{
?????????return?getComputedStyle(obj,false)[attr];
????????}
?????}
//var?timer=0;
??var?alpha=30;
function?startMove(obj,attr,iTarget){
?????????clearInterval(obj.timer);
?????????obj.timer=setInterval(function(){
??????????var?icur=0;
??????????if(attr=='opacity'){
????????????icur=Math.round(parseFloat(getStyle(obj.attr))*100);
??????????}else{
????????????icur=parseInt(getStyle(obj.attr));
??????????}
??????????//var?icur=parseInt(getStyle(obj,attr));
??????????var?speed=(iTarget-icur)/8;
??????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
??????????if(icur==iTarget){
??????????clearInterval(obj.timer);
??????????}else{
????????????if(attr=='opacity'){
??????????????obj.style.filter='alpha(opacity:'+(icur+speed)+')';
??????????????obj.style.opacity=(icur+speed)/100;
????????????}else{
??????????????obj.style[attr]=icur+speed+'px';
????????????}
??????????}
?????????},30)
}

</script>
</head>
<body>
<ul>
??????<li?id="li1"></li>
</ul>
</body>
</html>

這是提示的錯(cuò)誤，鼠標(biāo)滑過(guò)就提示這個(gè)，然后背景色也沒(méi)什么變化，實(shí)在不知道什么原因啊

qq_小貍貓_03724105

2016-10-18

源自：JS動(dòng)畫效果 4-4

關(guān)注問(wèn)題我要回答

985

操作

收起

3 回答

顏色不一樣的我回答被采納 +3 積分
2016-10-18

<!DOCTYPE?html>

<html>

<head>

<title>Document</title>

??????*{

???????margin:?0;

???????padding:?0;

??????}

??????ul,li{

???????list-style:?none;

??????}

??????ul?li{

???????width:?200px;

???????height:?100px;

???????background:?yellow;

???????margin-bottom:20px;

???????filter:?alpha(opacity:30);

???????border:?4px?solid?#000;

???????filter:?alpha(opacity:30);

????????opacity:?0.3;

??????}

</style>

window.onload=function(){

????????var?Li1=document.getElementById('li1');

????????var?Li2=document.getElementById('li2');

????????Li1.onmouseover=function(){

??????????startMove(this,'opacity',100);

????????}

????????Li1.onmouseout=function(){

??????????startMove(this,'opacity',30);

????????}

?????????

}

function?getStyle(obj,attr){

????????if(obj.currentStyle){

????????return?obj.currentStyle[attr];

????????}else{

?????????return?getComputedStyle(obj,false)[attr];

????????}

?????}

//var?timer=0;

??var?alpha=30;

function?startMove(obj,attr,iTarget){

?????????clearInterval(obj.timer);

?????????obj.timer=setInterval(function(){

??????????var?icur=0;

??????????if(attr=='opacity'){

????????????icur=Math.round(parseFloat(getStyle(obj.attr))*100); ?// 這行代碼寫錯(cuò)了getStyle(obj.attr)應(yīng)該是getStyle(obj,attr) 是調(diào)用用 , 號(hào)不是.號(hào)

??????????}else{

????????????icur=parseInt(getStyle(obj.attr)); // 這個(gè)也是自己改過(guò)來(lái)

??????????}

??????????//var?icur=parseInt(getStyle(obj,attr));

??????????var?speed=(iTarget-icur)/8;

??????????speed=speed>0?Math.ceil(speed):Math.floor(speed);

??????????if(icur==iTarget){

??????????clearInterval(obj.timer);

??????????}else{

????????????if(attr=='opacity'){

??????????????obj.style.filter='alpha(opacity:'+(icur+speed)+')';

??????????????obj.style.opacity=(icur+speed)/100;

????????????}else{

??????????????obj.style[attr]=icur+speed+'px';

????????????}

??????????}

?????????},30)

}

?

</script>

</head>

<body>

<ul>

??????<li?id="li1"></li>

</ul>

</body>

</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

夜聞秋雨
2016-10-18

總覺得你似乎沒(méi)有認(rèn)真看啊，雖然我也沒(méi)認(rèn)真看就是了，比如，你定義了Li1和Li2，但是只用到Li1，又比如getStyle()方法的參數(shù)，你有時(shí)候?qū)慻etStyle(obj.attr)，有時(shí)候?qū)慻etStyle(obj,attr)，這兩個(gè)的意義完全不一樣了啊，先去吃飯，我也還沒(méi)開始自己寫，你自己再仔細(xì)看一下自己的代碼吧