首頁猿問透明度動畫（類淘寶劃過圖片效果），...

透明度動畫（類淘寶劃過圖片效果），鼠標(biāo)劃過、劃出圖片透明度不改變

JavaScript

wubin_work 2017-03-25 17:00:35

會出現(xiàn)如圖情況，鼠標(biāo)移入顏色變淺，但是劃過另外一個圖片時候原先的圖片不回復(fù)，請問原因？所用圖片在最后<!DOCTYPE html><html><head>?? ?<meta charset="UTF-8">?? ?<title>透明度動畫應(yīng)用</title>?? ?<style>?? ?*{margin: 0;padding: 0;}?? ?ul{list-style: none;}?? ?img{border: 0;}??? #imgbox{width:664px;margin: 50px auto;}??? #imgbox ul li{overflow: hidden;border: 1px solid #B7B5B5;}??? #imgbox ul li:first-child{margin-bottom: -1px;}??? #imgbox ul li a{float: left;text-decoration: none;padding: 10px;}??? .ablr{border-width: 0px 1px 0px 1px;border-style: solid;border-color: #B7B5B5;}?? ?</style></head><body>?? ?<div id="imgbox">?? ??? ?<ul>?? ??? ??? ?<li>?? ??? ??? ??? ?<a href="#"><img src="1.jpg"></a>?? ??? ??? ??? ?<a href="#"><img src="2.jpg"></a>?? ??? ??? ??? ?<a href="#"><img src="3.jpg"></a>?? ??? ??? ?</li>?? ??? ??? ?<li>?? ??? ??? ??? ?<a href="#"><img src="4.jpg"></a>?? ??? ??? ??? ?<a href="#"><img src="5.jpg"></a>?? ??? ??? ??? ?<a href="#"><img src="6.jpg"></a>?? ??? ??? ?</li>?? ??? ?</ul>?? ?</div>?? ?<script src="jsopacity.js"></script></body></html>jsopacity.jswindow.onload=function(){?? ?var box=document.getElementById('imgbox'),?? ???? img=box.getElementsByTagName('img');?? ?for(var i=0;i<img.length;i++){?? ??? ?img[i].onmouseover=function(){?? ??? ??? ?startchange(50,this)?? ??? ?};?? ??? ?img[i].onmouseout=function(){??????????? startchange(100,this)?? ??? ?};?? ?}}var timer=null,??? alpha=100;function startchange(iTarget,that){?? ?clearInterval(timer);?? ?timer=setInterval(function(){?? ???? var speed=0;??????? if (alpha>iTarget) {??????????? speed=-10;??????? } else{??????????? speed=10;??????? }??????? if (alpha==iTarget) {?????? ??? ?clearInterval(timer);??????? }else{??????????? alpha+=speed;??????????? that.style.filter='alpha(opacity:'+alpha+')';??????????? that.style.opacity=alpha/100;??????? }?? ?},30);}

查看完整描述