透明度動畫（類淘寶劃過圖片效果），鼠標(biāo)劃過、劃出圖片透明度不改變
<!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.js
window.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)
?? ??? ?};
?? ?}
會出現(xiàn)有多個圖片同時處在選中狀態(tài)，請問哪里錯了、、
2017-03-25
定時器不可以共用，你這里明顯多個對象動畫都共用一個定時器【timer】了，應(yīng)該把定時器的地方都改成 obj.timer ， 在運(yùn)動函數(shù)里面，增加一個obj的參數(shù)。例如：
//這里是遍歷的代碼
for(var i=0,l=img.length;i<l;i++){
????img[i].timer = null;
????img[i].onmouseover=function(){
????????moveFn(img[i],50);
????}
????img[i].onmouseout=function(){
????????moveFn(img[i],100);
????}
}
//這里是運(yùn)動框架代碼的上面部分，下面部分跟原來的差不多的，只要是修改定時器
function moveFn(obj,itarget){
????clearInterval(obj,timer);
????obj.timer = setInterval(function(){
????????// 運(yùn)動代碼，自行補(bǔ)充
????},10);
}