如何在触发onmouseover时同时发生（1宽度变化运动；2颜色变化运动）回答时贴出代码~
田展帆
2016-03-20 23:23
如何在触发onmouseover时同时发生（1宽度变化运动；2颜色变化运动）回答时贴出代码~
1回答
-
- 啊唔
- 2016-03-21 20:14:52
我也是初学者 不知道对不对。。。我直接放一起了。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
body,ul,li{ margin:0; padding:0; font-size:13px;}
ul,li{list-style:none;}
li{width:300px;
height:100px;
background:yellow;
border:1px solid #000;
filter:alpha(opacity:30);
opacity:0.3;}
</style>
<script type="text/javascript">
window.onload=function(){
var li=document.getElementById('li');
var timer=null;
clearInterval(timer);
li.onmouseover=function(){
clearInterval(timer);
var speed=(500-parseInt(li.offsetWidth))/5,
speed2=(1-parseFloat(getStyle(li,'opacity')))/5;
timer=setInterval(function(){
var width =parseInt(getStyle(li,"width")),
icur=parseFloat(getStyle(li,'opacity'));
if(width<=500){
li.style.width=width+speed+"px";
}else{
clearInterval(timer);
}
if(icur<1){
icur+=speed2;
li.style.filter="alpha(opacity:"+icur+")";
li.style.opacity=icur;
}else{
clearInterval(timer);
}
},50);
};
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
<ul>
<li id="li"></li>
</ul>
</body>
</html>
JS动画效果
113920 学习 · 1494 问题
相似问题