<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#li1{width: 200px;height: 100px;opacity: 0.3;background :brown;}
</style>
<!--<script type="text/javascript" src="js/move1.js" ></script>-->
</head>
<body>
<div id="li1">
</div>
<script src="js/lianshi.js"></script>
<script type="text/javascript">
window.onload=function(){
var ll=document.getElementById('li1');
ll.onmouseover=function(){
starMove(ll,'width',600,function(){
starMove(ll,'height',400,function(){
starMove(ll,'opacity',100);
});
});
};
ll.onmouseout=function(){
starMove(ll,'opacity',30,function(){
starMove(ll,'height',100,function(){
starMove(ll,'width',200);
});
});
};
};
</script>
</body>
</html>
//封装一个获取样式的方法
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function starMove(obj, json, fn) {
//假设
var flag = null
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//假设所有动作都已完成成立
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 spend = (json[attr] - icur) / 8;
spend = spend > 0 ? Math.ceil(spend) : Math.floor(spend);
//检测停止
if (icur != json[attr]) {
flag = false;
}else{
flag = true
}
if (attr == 'opacity') {
obj.style.filter = "alpha(opacity:'+(icur+spend)+')";
obj.style.opacity = (icur + spend) / 100;
} else {
obj.style[attr] = icur + spend + 'px';
}
}
if (flag) {
clearInterval(obj.timer)
if (fn) {
fn();
}
}
}, 30)
}
没有细看。但是感觉应该是{“opacity”，"30"}这个样子。