透明度沒有改變
<!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.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>
<div id="div1"></div>
</body>
</html>
2016-03-17
整體沒問題，但里面的小錯誤太多了，這是給你修改后的代碼，自己去對照找一下錯誤吧。
<!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>
2022-03-23
少了也不好，多了也不好，少了改的時候容易出錯，多了看著比較繁瑣在if里加了括號后，加載的效果好多了，不是那種一滾動就去加載的那種了
2016-03-17
1 ?window.noload=function(){ ?//把noload改成onload
2?var odiv = Document.getElementById('div1'); //把Document改成document
3?odiv.style.filter = "alpha(opacity:‘+alpha+')"; //把‘ 改成 ” ?或把“ 改成 ’
2016-03-17
有三個小錯誤,都是拼寫問題，window.onload你寫成了 window.noload; 還有兩處 Document.getElementById的‘D’不應該大寫，應該是document.getElementById。。這三處拼寫改了，應該就對了
2016-03-17
<!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>