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

求助無法漸變而且會閃怎么回事

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style?type="text/css">
?ul,li{
????????????list-style:none;
?}
????????ul?li{
????????????margin-right:20px;
?width:200px;
?height:200px;
?float:left;
?background:?brown;
?opacity:0.3;
?}
????</style>
????<script?type="text/javascript">
?window.onload?=?function?()?{
????????????var?aLi?=?document.getElementsByTagName("li");
?for?(var?i?=?0;?i?<?aLi.length;?i++)?{
????????????????aLi[i].timer?=?null;
?aLi[i].alpha?=?0.3;
?aLi[i].onmouseover?=?function(){
????????????????????startMove(this,1);

?}
????????????????aLi[i].onmouseout?=?function(){
????????????????????startMove(this,0.3);
?}
????????????}
????????}

????????function?startMove(obj,iTarget){
????????????clearInterval(obj.timer);

?obj.timer?=?setInterval(function(){
????????????????var?speed?=?0;
?if(iTarget>obj.alpha){
????????????????????speed?=?0.1;
?}
????????????????else?{
????????????????????speed?=?-0.1;
?}
????????????????if(obj.alpha?==?iTarget){
????????????????????clearInterval(obj.timer)
????????????????}
????????????????else{
????????????????????obj.alpha?+=?speed;
?obj.style.opacity?=?obj.alpha?;
?}

????????????},10)
????????}
????</script>
</head>
<body>
<ul>
????<li></li>
????<li></li>
????<li></li>
????<li></li>
</ul>
</body>
</html>

serebi

2016-05-08

源自：JS動畫效果 4-1

關注問題我要回答

431

操作

收起

1 回答

漫步人生路他爸爸回答被采納 +3 積分
2016-05-08

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style?type="text/css">
?ul,li{
????????????list-style:none;
?}
????????ul?li{
????????????margin-right:20px;
?width:200px;
?height:200px;
?float:left;
?background:?brown;
?opacity:0.3;
?}
????</style>
????<script?type="text/javascript">
?window.onload?=?function?()?{

????????????var?aLi?=?document.getElementsByTagName("li");
?for?(var?i?=?0;?i?<?aLi.length;?i++)?{
????????????????aLi[i].timer?=?null;

?aLi[i].alpha?=?0.3;
?aLi[i].onmouseover?=?function(){
????????????????????startMove(this,1);
?
?}
????????????????aLi[i].onmouseout?=?function(){
????????????????????startMove(this,0.3);
?}
????????????}
????????}
?
????????function?startMove(obj,iTarget){
????????????clearInterval(obj.timer);

?obj.timer?=?setInterval(function(){
???????????var?speed?=?0;??????
?if(iTarget>obj.alpha){
????????????????????speed?=?0.1;
?}
????????????????else?{
????????????????????speed?=?-0.1;
?}
????????????????if(obj.alpha?==?iTarget){
????????????????????clearInterval(obj.timer)
????????????????}
????????????????else{
????????????//alert(obj.alpha);
???????????????????obj.alpha?=?Math.round((obj.alpha?+?speed)*10)/10;
?obj.style.opacity?=?obj.alpha?;

?}
?
????????????},50)
????????}
????</script>
</head>
<body>
<ul>
????<li></li><li></li><li></li><li></li>
??
</ul>
</body>
</html>

?我把你的obj.alpha?+=?speed;改成了obj.alpha = Math.round((obj.alpha + speed)*10)/10;
就可以了
具體為什么會出錯是因為計算機成生小數(shù)的過程有可能有點偏差,你要拿3也許它給的是3.000000...004所以我們四舍五入一下就好了