透明度没有改变-慕课网

首页课程实战体系课手记专栏慕课教程

透明度没有改变

来源：2-2 JS透明度动画

man豪

2016-03-16 23:02

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

margin: 0px;

padding: 0px;

}

#div1{

width: 200px;

height: 180px;

background: red;

filter: alpha(opacity:30);

opacity: 0.3;

}

</style>

window.noload=function(){

var odiv=Document.getElementById('div1');

odiv.onmouseover=function(){

starmove(100);

}

odiv.onmouseout=function(){

starmove(30);

}

var timer = null;

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+=speed;

// odiv.style.filter='alpha(opacity:'+alpha+')';

odiv.style.filter = "alpha(opacity:‘+alpha+')";

odiv.style.opacity = alpha/100;

}

},30)

}

</script>

</head>

<body>

</body>

</html>

写回答关注

5回答

呆4

2016-03-17 10:56:22

已采纳

整体没问题，但里面的小错误太多了，这是给你修改后的代码，自己去对照找一下错误吧。
<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Document</title>

   <style>

    *{

     margin: 0px;

     padding: 0px;

    }

    #div1{

     width: 200px;

     height: 180px;

     background: red;

     filter: alpha(opacity:30);

     opacity: 0.3;

    }

</style>

   <script>

window.onload=function(){

var odiv=document.getElementById('div1');

odiv.onmouseover=function(){

starmove(100);

}

odiv.onmouseout=function(){

starmove(30);

}

}

        var timer = null;

        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+=speed;
console.log(alpha);

// odiv.style.filter='alpha(opacity:'+alpha+')';

odiv.style.filter = "alpha(opacity:'+alpha+')";

                    odiv.style.opacity = alpha/100;

}

},30)

}

</script>

</head>

<body>

   <div id="div1"></div>

</body>

</html>

1 0

man豪

非常感谢！直接告诉我哪里错就好了，找半天

2016-04-12 14:20:26

共 1 条回复 >
慕移动9181930

2022-03-23 20:05:39

少了也不好，多了也不好，少了改的时候容易出错，多了看着比较繁琐在 i f 里加了括号后，加载的效果好多了，不是那种一滚动就去加载的那种了

0 0
hobinyang

2016-03-17 11:19:27

1 window.noload=function(){ //把noload改成onload
2 var odiv = Document.getElementById('div1'); //把Document改成document
3 odiv.style.filter = "alpha(opacity:‘+alpha+')"; //把‘ 改成 ” 或把“ 改成 ’

0 0
Seven377

2016-03-17 11:08:45

有三个小错误,都是拼写问题，window.onload你写成了 window.noload; 还有两处 Document.getElementById的‘D’不应该大写，应该是document.getElementById。。这三处拼写改了，应该就对了

0 0
hobinyang

2016-03-17 11:03:31

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title></title>

<style>
* {
padding: 0;
margin: 0;
}
div {
background: blue;
width: 200px;
height: 200px;
position: relative;
left:0px;
top:100px;
filter:alpha(opacity:30);
opacity:0.3;
}

</style>

</head>
<body>
<div id="div1">
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
startMove(100);
}
oDiv.onmouseout = function(){
startMove(30);
}
}
var timer = null;//可有可无
var alpha = 30;
var speed = 0;
function startMove(iTarget){
clearInterval(timer);
if(alpha > iTarget) {
speed = -10;
}else{
speed = 10;
}
var oDiv = document.getElementById("div1");
timer = setInterval(function(){
if(alpha == iTarget) {
clearInterval(timer);
}
else {
alpha += speed;
oDiv.style.filter = "alpha(opacity:"+alpha+")";
oDiv.style.opacity = alpha/100;
}
},30)
}

</script>
</html>

0 0