滑鼠移動顯示圖片一塊一塊的顯示
阿新 • • 發佈:2018-11-02
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } body{ width:1000px; height:550px; margin:0 auto; text-align:center; position: relative; } div{ background:url("timg.jpg") no-repeat; } </style> </head> <body> <script> window.onload=function(){ for(var i=0;i<10;i++){ for(var j=0;j<10;j++){ oDiv=document.createElement('div'); oDiv.style.width='50px'; oDiv.style.height='50px'; oDiv.style.position='absolute'; oDiv.style.left=j*50+'px'; oDiv.style.top=i*50+'px'; oDiv.style.backgroundPosition=-j*50+'px '+ (-i)*50+'px'; oDiv.style.cursor='pointer'; oDiv.style.opacity='0'; oDiv.onmouseover=function () { this.style.opacity='1'; }; document.body.appendChild(oDiv); } } } </script> </body> </html>