이 기사는 참조를 위해 JS 그림 페이딩 및 아웃 전환의 자세한 코드를 공유했습니다. 특정 내용은 다음과 같습니다
<! docType html> <html> <head> <meta charset = "utf-8"> <title> </title> <style type = "text/css"> *{padding : 0; margin : 0;} ul {오버 플로우 : Hidden;} li {list-style : 30 px; 왼쪽; 왼쪽; 줄-리그 : 30px; 텍스트-정렬 : 중심;} img {width : 306px; 불투명도 : 0;} .Active {background : yellow} </style> </head> <ul> <li> Wang Baoqiang </li> <li> ma rong </li> <li> </li> </li> </li> </li> <script src = "public.js"> </script> <script type = "text/javaScript"> var oli = document.getElementsByTagName ( "li"); var oimg = document.getElementsByTagName ( "IMG") [0]; var arr = [ 'img/wbb.jpg', 'img/wlp.jpg', 'img/qs.jpg'] var time = null; var time1 = null; for (i = 0; i <oli.length; i ++) {oli [i] .index = i; oli [i] .onclick = function () {for (i = 0; i <oli.length; i ++) {oli [i] .classname = ""; } this.className = "Active"; oimg.src = arr [this.index]; var num = 0; var 단계 = 2; ClearInterval (시간); ClearInterval (Time1); time = setInterval (function () {num+= step; if (num> = 200) {num = 200; clearinterval (time);} oimg.style.opacity = num/200;}, 20)} </script> </html>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.