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

沒有透明度改變的效果，求大神答疑解惑，萬分感謝

<!DOCTYPE html>

<html>

<head>

<title>opacity</title>

#div1{

? ?height: 200px;

? ?width: 200px;

? ?background-color:red;

? ?filter:alpha(opacity:20);

? ?opacity: 0.2;

}

</style>

</head>

<body>

window.onload=function() {

var oDIV=document.getElementById("div1");

? ? oDIV.onmouseover=onMove(100);

? ? oDIV.onmouseout=onMove(20);

}

var oDIV=document.getElementById("div1");

var timer=null;

var alpha=20;

var speed=0;

function onMove(iTarget){

? ?clearInterval(timer);

? ?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+")";

? ? oDIV.style.opacity=alpha/100;

? ?}

? ?},30)

}

</script>

</body>

</html>

張筱諾8983

2015-12-09

源自：JS動畫效果 2-2

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

893

操作

收起

3 回答

木子舟義
2015-12-09

我真不知道上面那些人是在回答些什么。代碼不看就說瀏覽器不支持？幫你改了一下。不理解可以問

<!DOCTYPE?html>
<html>

<head>
????<title>opacity</title>
????<style?type="text/css">
????#div1?{
????????height:?200px;
????????width:?200px;
????????background-color:?red;
????????filter:?alpha(opacity:?20);
????????opacity:?0.2;
????}
????</style>
</head>

<body>
????<div?id="div1"></div>
????<script>
????window.onload?=?function()?{
????????var?oDIV?=?document.getElementById("div1");
????????oDIV.onmouseover?=?function(){onMove(100);}
????????oDIV.onmouseout?=?function(){onMove(20);}
????}
????var?oDIV?=?document.getElementById("div1");
????var?timer?=?null;
????var?alpha?=?20;

????function?onMove(iTarget)?{
????????clearInterval(timer);
????????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?+?")";
????????????????oDIV.style.opacity?=?alpha?/?100;
????????????}
????????},?30)
????}
????</script>
</body>

</html>

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

收起回答

#1

張筱諾8983 提問者

恩恩，應(yīng)該是我直接寫的oDIV.onmouseover=onMove(100);和 oDIV.onmouseout=onMove(20);沒有寫function和中括號的原因，這樣寫：oDIV.onmouseover = function(){onMove(100);}和 oDIV.onmouseout = function(){onMove(20);}就對了，大神這里必須寫中括號嗎？