我設(shè)置的透明度是opacity屬性的 ,執(zhí)行的時當(dāng)鼠標(biāo)移進(jìn)去opacity的值在1~1.1 之間跳動 移出去的時候opacity在0.2~0.3之間跳動 ,然而結(jié)果很明顯div一直在抖動 我不知是哪里出問題 ,求解答
<style>
?body{ margin:0; padding:0;}
?#dv{ background: #006; width:100px; height:100px; opacity:0.3;}
</style>
<script>
?window.onload=function(){
?var dd=document.getElementById('dv');
?dd.onmouseover=function(){
?start(1);
?}
?dd.onmouseout=function(){
?start(0.3);
?}
}
? var time=null;
? var opty=0.3;
? function start(vaule){
? ?clearInterval(time);
var dd=document.getElementById('dv');
time=setInterval(function(){
? ?var speed=0;
if(opty>vaule){
?speed=-0.1;
}
?else{
? speed=0.1;
?}
? ? ?if(opty==vaule){
? clearInterval(time);
?}
?else{
opty+=speed;
dd.style.opacity=opty;}
},30)
? }
</script>
</head>
<body>
<div id="dv"></div>
</body>
2016-08-13
很明顯,opacity在1~1.1,說明這時候已經(jīng)溢出了~
用整數(shù)沒有問題,如下
<style type="text/css" >
?body{ margin:0; padding:0;}
?#dv{ background: #006; width:100px; height:100px; opacity:0.3;}
</style>
<script type="text/javascript">
?window.onload=function(){
?var dd=document.getElementById('dv');
?dd.onmouseover=function(){
?startmove(100);
?}
?dd.onmouseout=function(){
?startmove(30);
?}
}
? var time=null;
?var opty=30;
?function startmove(value){
?? clearInterval(time);
???? var dd=document.getElementById('dv');
time=setInterval(function(){
?? var speed=0;
if(opty>value){
?speed=-2;
}
?else{
? speed=2;
?}
???? if(opty == value){
??????????? clearInterval(time);
?}
?else{
opty+=speed;
dd.style.opacity=parseFloat(opty/100);
}
},30);
? }
</script>
</head>
<body>
<div id="dv"></div>
</body>
但是用小數(shù),還存在一個小問題,執(zhí)行的時當(dāng)鼠標(biāo)移進(jìn)去opacity的值在0.99~1.0 之間跳動 ? 移出去的時候opacity在0.3~0.31之間跳動(我將你的speed單位值設(shè)置為 0.01)。
2016-07-11
var opty=0.3;放到function start(vaule)下試試
2016-07-11
親愛的,你沒有使用getStyle取得屬性值哦,這樣是有漏洞的,請把dd.style.opacity=opty;改掉,改成dd.style.opacity=parseFloat(getStyle(dd,'opacity'))+speed;