<!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;//假设全部执行成功
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当中测试时没有变化，自己找了很长时间没有找到原因，兼容代码应该是对的，那么应该是判断透明度那段JS出了问题吧，求解，感谢~
添加回答
举报
0/150
提交
取消