我设置的透明度是opacity属性的 ，执行的时当鼠标移进去opacity的值在1~1.1 之间跳动 移出去的时候opacity在0.2~0.3之间跳动 ，然而结果很明显div一直在抖动 我不知是哪里出问题 ，求解答
lhb3604072
2016-07-10 23:01
<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>
3回答
-
- qq_幸福不缺氧_03691061
- 2016-08-13 09:50:55
很明显，opacity在1~1.1，说明这时候已经溢出了~
用整数没有问题，如下
<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>但是用小数，还存在一个小问题，执行的时当鼠标移进去opacity的值在0.99~1.0 之间跳动 移出去的时候opacity在0.3~0.31之间跳动（我将你的speed单位值设置为 0.01）。
-
- ruirae
- 2016-07-11 21:22:04
var opty=0.3;放到function start(vaule)下试试
-
- qq_放肆青春_03307463
- 2016-07-11 09:35:44
亲爱的，你没有使用getStyle取得属性值哦，这样是有漏洞的，请把dd.style.opacity=opty;改掉，改成dd.style.opacity=parseFloat(getStyle(dd,'opacity'))+speed;
JS动画效果
113925 学习 · 1443 问题
相似问题