                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

我想看實例的代碼代碼呢？

為什么沒有實例代碼

苦悶di才華

2018-03-04

源自：JS動畫效果 2-1

關注問題我要回答

1435

操作

收起

2 回答

苦悶di才華提問者
2018-03-04

謝謝后呀

0 回復有任何疑惑可以回復我~

收起回答

五趾的魚
2018-03-04

<!doctype?html>
<html>
<head>
<meta?charset='utf-8'>
<title>送你了?</title>
</head>
<style>
#div1{
???width:300px;
???height:300px;
???background:red;
???filter:?alpha(opacity:30);
???opacity:0.3;
}
</style>
<script>
window.onload=function(){
???var?oDiv=document.getElementById('div1')
???oDiv.onmouseover=function(){
???????startMove(100)
???}
???oDiv.onmouseout=function(){
???????startMove(30)
???}
}
var?alpha=30;
var?timer='null';
function?startMove(iTarget){
???var?oDiv=document.getElementById('div1')
???clearInterval(timer)
???//開啟一個定時器
???timer=setInterval(function(){
??????var?speed=0;

??????if(alpha<iTarget){
?????????speed=10;
??????}
??????else{
?????????speed=-10;
??????}

??????if(alpha==iTarget){
?????????//停止這個定時器
?????????clearInterval(timer)
??????}
??????else{
?????????alpha+=speed;

?????????oDiv.style.filter='alpha(opacity:'+alpha+')';
?????????oDiv.style.opacity=alpha/100;
??????}

???},30)
}
</script>
<body>
<div?id='div1'>
</div>
</body>
</html>