為什么寬高沒有反應？透明度卻有反應？
<title>無標題文檔</title>
<style>
body,ul,li{
padding:0;
margin:0;}
ul,li{
list-style:none;}
ul li{
width:200px;
height:100px;
background:yellow;
margin-bottom:20px;
border:4px solid #000;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script>
window.onload = function(){ //window.onload的含義是
//var li1:定義變量，document：對象，指整個頁面、getElementById:方法，用于獲取id
var li1 = document.getElementById("li1");
var li2 = document.getElementById("li2");
var li3 = document.getElementById("li3");
var li4 = document.getElementById("li4");
li1.onmouseover = function(){ //鼠標移動到li1時
startMove(this,'height',400); //this指的是li1這個對象
}
li1.onmouseout = function(){
startMove(this,'height',100);
}
li2.onmouseover = function(){
? ?startMove(this,'width',400);
}
li2.onmouseout = function(){
startMove(this,'width',200);
}
li3.onmouseover = function(){
? ?startMove(this,'opacity',50); //opacity透明度
}
li3.onmouseout = function(){
startMove(this,'opacity',100);
}
li4.onmouseover=function(){
startMove(this,"width",400,function(){
startMove(this,"height",200,function(){
startMove(this,"opacity",100);
});
});
}
li4.onmouseout=function(){
startMove(this,"opacity",30,function(){
startMove(this,"height",100,function(){
startMove(this,"width",200);
});
});
}
}
function getStyle(obj,attr){ //兩種獲取的方法，解決瀏覽器兼容的問題
if(obj.currentStyle){
return obj.currentStyle.attr;
}
else{
return getComputedStyle(obj,false)[attr];
}
}
var alpha = 30;
function startMove(obj,attr,iTarget,fn){
clearInterval(obj.timer);//清除定時器
obj.timer=setInterval(function(){
var icur = 0;//判斷是否是透明度，透明度沒有單位，使用寫一個函數(shù)來判斷
if(attr == 'opacity'){
icur= Math.round(parseInt(getStyle(obj,attr))*100);//Math.round:四舍五入,去除小數(shù)點尾巴。parseInt() 函數(shù)可解析一個字符串，并返回一個整數(shù)。
}
else{
icur= parseInt(getStyle(obj,attr));
}
var icur=parseInt(getStyle(obj,attr));
var speed = (iTarget-icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed); //Math.floor()向下取整；Math.ceil()向上取整；Math.round()四舍五入；
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) //30是30毫秒
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
? ? <li id="li2"></li> ??
? ? <li id="li3"></li>
? <li id="li4"></li>
</ul>
</body>
</html>
2016-12-04
obj.style.attr = icur+ speed+'px'改成obj.style[attr] = icur+ speed+'px';