課程
/前端開發
/JavaScript
/JS動畫效果
如何在觸發onmouseover時同時發生（1寬度變化運動；2顏色變化運動）回答時貼出代碼~
2016-03-20
源自：JS動畫效果 4-1
正在回答
我也是初學者 不知道對不對。。。我直接放一起了。
<!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(){
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{
}
if(icur<1){
icur+=speed2;
li.style.filter="alpha(opacity:"+icur+")";
li.style.opacity=icur;
? },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動畫的學習，從簡單動畫開始，逐步深入各種動畫框架封裝
3 回答如何下面代碼中div2的透明度和寬高同時變化？
2 回答同時運動的寬度問題
1 回答同時運動寬和高時，高改變的值不對，求解代碼中的錯誤
2 回答寬度變化值不同？
1 回答onmouseover是移動到元素上觸發一次還是指針懸浮時觸發
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-03-21
我也是初學者 不知道對不對。。。我直接放一起了。
<!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>