根据鼠标移动位置显示背景图片
Posted ljuyi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了根据鼠标移动位置显示背景图片相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <link rel="stylesheet" type="text/css" href="css/common.css" /> 7 <style type="text/css"> 8 #box{width:600px;height:630px;background:#CCC;margin:0 auto;padding:5px;padding-left:35px;} 9 #box div{float:left;width:60px;height:60px;background:url(img/pic.jpg) no-repeat;opacity:0;margin:1px;} 10 </style> 11 </head> 12 13 <body> 14 <div id="box" class="clearfix"> 15 </div> 16 <script> 17 var oBox = document.getElementById("box"); 18 var oDiv = oBox.getElementsByTagName("div"); 19 var str = ""; 20 for(var i=0;i<100;i++) 21 str += "<div></div>"; 22 oBox.innerHTML = str; 23 for(var i=0;i<100;i++) 24 { 25 oDiv[i].style.top = parseInt(i/9)*61+"px"; 26 oDiv[i].style.left = i%9*61+"px"; 27 var co = -(parseInt(i/9)*61); 28 var ro = -(i%9*61); 29 oDiv[i].style.backgroundPosition = ro+"px"+" "+co+"px"; 30 oDiv[i].onmouseover = function(){ 31 this.style.opacity = "1"; 32 }; 33 } 34 35 </script> 36 </body> 37 </html>
以上是关于根据鼠标移动位置显示背景图片的主要内容，如果未能解决你的问题，请参考以下文章