この記事では、参照用のJS画像が退色し、切り替えをフェードすることの詳細なコードを共有しています。特定のコンテンツは次のとおりです
<!Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style type = "text/css"> *{padding:0; margin:0;} ul {hidden;} li {list-style:none:none:1ppx; wid 000; wid 000; wid 000; wid 000;左; line-height:30px; text-align:center;} img {width:306px; ofacity:0;} .active {background:yellow} </style> </head> <body> <ul> <li> wang baoqiang </li> <li> body </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 step = 2; ClearInterval(時間); ClearInterval(time1); time = setInterval(function(){num+= step; if(num> = 200){num = 200; clearinterval(time);} oimg.style.opacity = num/200;}、20)}} </script> </html> </html> </html>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。