我在控制臺查看屬性都跑的了, 就是他的效果不顯示,很郁悶呀求救
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>拖動</title>
<meta charset="utf-8">?
<style type="text/css">
*{margin:0;
? padding:0;
?}
#div1 {
width: 200px;
height: 200px;
background: red;
filter:alpha(opactiy:100);
opacity: 1;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
starFilter(10);
}
oDiv.onmouseout = function(){
starFilter(100);
}
}
var timer = null,
alpha = 100;
function starFilter(iTarget){
clearInterval(timer);
var oDiv = document.getElementById("div1");
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(opactiy:'+alpha+')';
oDiv.style.opactiy = alpha/100;
console.log(oDiv.style.opactiy);
}
},30)
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
2018-06-21
不知道為什么復制的代碼出現很多變成中文了，opacity才是正確的。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>透明度</title>
? ? <style type="text/css">
? ? ? ? *{padding: 0;margin: 0;}
? ? ? ? #div1{
? ? ? ? ? ? width:200px;
? ? ? ? ? ? height:200px;
? ? ? ? ? ? background:red;
? ? ? ? ? ? filter:alpha(opacity:30);//透明度30
? ? ? ? ? ? opacity:0.3;
? ? ? ? }
? ? </style>
? ? <script >
? ? ? ? window.onload = function ()
? ? ? ? {
? ? ? ? ? ?var oDiv=document.getElementById("div1");
? ? ? ? ? ?oDiv.onmouseover = function()
? ? ? ? ? ?{
? ? ? ? ? ? ? ?startMove(100);//鼠標移上去觸發透明度100
? ? ? ? ? ?}
? ? ? ? ? ?oDiv.onmouseout = function()
? ? ? ? ? ?{
? ? ? ? ? ? ? ?startMove(30);//鼠標移開觸發透明度30
? ? ? ? ? ?}
? ? ? ? }
? ? ? ? var timer = null;
? ? ? ? var alpha = 30;
? ? ? ? function startMove(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)//iTarget目標
? ? ? ? ? ? ? ? ? ?{clearInterval(timer);}//關閉定時器
? ? ? ? ? ? ? ?else
? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ?alpha += speed;
? ? ? ? ? ? ? ? ? ?oDiv.style.filter = 'alpha(opacity:'+ alpha + ')';
? ? ? ? ? ? ? ? ? ?oDiv.style.opacity = alpha/100;
? ? ? ? ? ? ? ?}
? ? ? ? ? ? },30);
? ? ? ? }
? ? </script>
</head>
<body>
?<div id="div1"></div>
</body>
</html>
2018-06-21
1、oDiv.style.filter = 'alpha(opactiy:'+alpha+')';
文中的opactiy這個代碼都寫錯了，應該這樣寫opacity。
2、starFilter(10);老師寫的是startMove;
3、正確的代碼是這樣的，你可以自己對比下：
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>透明度</title> ????<style?type="text/css"> ?*{padding:?0;margin:?0;} ????????#div1{ ????????????width:200px; ?height:200px; ?background:red; ?filter:alpha(opacity:30);//透明度30 ?opacity:0.3; ?} ????</style> ????<script?> ?window.onload?=?function?() ????????{ ???????????var?oDiv=document.getElementById("div1"); ?oDiv.onmouseover?=?function() ???????????{ ???????????????startMove(100);//鼠標移上去觸發透明度100 ?} ???????????oDiv.onmouseout?=?function() ???????????{ ???????????????startMove(30);//鼠標移開觸發透明度30 ?} ????????} ????????var?timer?=?null; ?var?alpha?=?30; ?function?startMove(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)//iTarget目標 ?{clearInterval(timer);}//關閉定時器 ?else ?{ ???????????????????alpha?+=?speed; ?oDiv.style.filter?=?'alpha(opacity:'+?alpha?+?')'; ?oDiv.style.opacity?=?alpha/100; ?} ????????????},30); ?} ????</script> </head> <body> ?<div?id="div1"></div> </body> </html>2018-06-21
你的這些中文什么。。。。，麻煩寫的規范，注釋用//,其他不要出現中文，
2017-08-07
有沒有人呀