<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>hello?world!</title>
<style?type="text/css">
#oli?{
width:?200px;
height:?200px;
background-color:?blue;
border:?5px?solid?red;
list-style:?none;
}
</style>
<script?src="./js/script.js"></script>
<script?type="text/javascript">
window.onload?=?function()?{
var?oli?=?document.getElementById('oli');
oli.onmouseover?=?function(){
startMove(oli,{"height":250,"opacity":50});
}
}
</script>
</head>
<body>
<ul>
<li?id="oli"></li>
</ul>
</body>
</html>以上是HTML部分下面是JavaScript代碼 function?startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer?=?setInterval(function(){
var?all?=?true;//假設(shè)全部執(zhí)行成功
for(var?attr?in?json){
var?icur?=?0;
if(attr?==?"opacity"){
icur?=?Math.round(parseFloat(getStyle(obj,attr))?*?100);
}else{
icur?=?parseInt(getStyle(obj,attr));
}
var?speed?=?(json[attr]?-?icur)/10;
speed?=?speed>0?Math.ceil(speed):Math.floor(speed);
if(icur?!=?json[attr]){
all?=?false;
}
//判斷是否為透明度
if(attr?==?"opacity"){
obj.style.filter='alpha(opacity='+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}else{
obj.style[attr]?=?icur?+?speed?+?"px";
}???
//檢測停止
if(all){
clearInterval(obj.timer);
if(fn){
fn();
}
}
}
},30);??
}
//解決IE兼容
function?getStyle(obj,attr)?{
return?obj.currentStyle???obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}透明度在IE7、8當(dāng)中測試時沒有變化,自己找了很長時間沒有找到原因,兼容代碼應(yīng)該是對的,那么應(yīng)該是判斷透明度那段JS出了問題吧,求解,感謝~
IE中不兼容,求解原因
一二得三
2017-01-11 00:25:30