html+js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>homework3</title>
<link type="text/css" href="C:\Users\apple\Desktop\bluem\暑期培训\暑期前端第3次讨论班—运动\hw3\hw3.css" rel="stylesheet">
</head>
<body>
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
</body>
<script>
window.onload = function(){
var aDiv = document.getElementsByTagName('div');
for(var i =0;i<aDiv.length;i++){
aDiv[i].onmouseover=function(){
//多次回调move函数的时候,里层的this指向的是window而不是页面获取到的那个元素,不能直接用this传参
//在外面重新定义一个变量,被谁调用就指向谁
var a = this;
startMove(a,'width',300,function(){
startMove(a,'height',300,function(){
startMove(a,'opacity',100);
});
});
}
aDiv[i].onmouseout = function(){
var a = this;
startMove(a,'opacity',30,function(){
startMove(a,'height',100,function(){
startMove(a,'width',100);
});
});
}
}
}
function getStyle(obj,attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
var timer = null;
function startMove(obj,attr,iTarget,fn){
var aDiv = document.getElementsByTagName('div');
//为了避免定时器之间互相影响,为每个对象设置定时器obj.timer
clearInterval(obj.timer);//把所有定时器清空,避免多次进入速度变快的情况
obj.timer = setInterval(function(){
//1.取当前值
var icur = 0;
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur = parseInt(getStyle(obj,attr));
}
//2.算速度
var speed = (iTarget-icur)/8;
speed = speed >0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
if(icur == iTarget){
clearInterval(obj.timer);
if(fn){
fn();//作为回调函数
}
}
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>
</html>
css
*{
margin: 0;
padding: 0;
}
/* 防止因盒子间距造成的影响,不用margin控制边距,用绝对定位 */
div{
position: absolute;
top: 0;
width: 100px;
height: 100px;
margin-right: 350px;
background-color: rgb(87, 250, 209);
text-align: center;
/* filter: alpha(opacity:30); */
opacity: 0.3;
}
#d1{
left: 0;
}
#d2{
left: 400px;
}
#d3{
left: 800px;
}
效果