為什么我要寬度顏色卻變了呢？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>咋地呢</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
div {
background-color: #0C6;
width: 150px;
height: 50px;
margin-top: 20px;
cursor: pointer;
border: solid 2px #000;
filter: alpha(opacity : ? 30);
opacity: 0.3;
}
</style>
<script>
window.onload = function() {
var div = document.getElementsByTagName("div");
for ( var i = 0; i < div.length; i++) {
div[i].timer = null;
div[i].onmouseover = function() {
startmove(this, 'width', 600);
}
div[i].onmouseout = function() {
startmove(this, 'width', 150);
}
}
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
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 speed = (itarget - icur) / 5;
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>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
2016-08-10
if (attr = 'opacity')改為if (attr == 'opacity')
=是賦值 你把opacity賦值給了attr屬性，所以不管你設置什么屬性，都是opacity透明度在改變