在一些淘宝界面里我们经常看到一些商品详情界面里会出现鼠标悬浮出现放大图的问题，在这里我们需要记住一个放大比列的计算公式： （大图的宽度-大图盒子宽度）/（盒子的宽度-阴影的宽度） 注意点：在js中，如：background-color类似中间的— 可以表达为 backgroundColor 驼峰写法
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> </head> <style> *{ margin: 0; padding: 0; } .boxs{ top: 0px; left: 450px; } </style> <body> <div class='tu' style='width: 313px;height: 418px;position: relative;justify-content: space-between;'> <div class='box' style='background-color: rgba(0, 0, 0, 0.5);position: absolute;'></div> <img class='tutu' style='width: 400px;height: 400px;' src='./img/sofa.jpg' alt=''> <div class='boxs' style='width: 400px;height: 400px; overflow: hidden;position: absolute;'> <img class='boxt' style='width: 1600px;height: 1600px;position: absolute;' src='./img/sofa.jpg' alt=''> </div> </div> </body> </html> var boxx=document.getElementsByClassName('tu')[0] var tutu=document.getElementsByClassName('tutu')[0] var box=document.getElementsByClassName('box')[0] var boxs=document.getElementsByClassName('boxs')[0] var boxt=document.getElementsByClassName('boxt')[0] boxx.onmousemove=function(event){ var e=event||window.event if(e.clientX+'px'<=400+'px'&&e.clientX+'px'>=0+'px'){ if(e.clientY+'px'<=400+'px'&&e.clientY+'px'>=0+'px'){ boxs.style.display='inline-block' box.style.width=100+'px' box.style.height=100+'px' box.style.left=e.clientX-50+'px' box.style.top=e.clientY-50+'px' boxt.style.left=-e.clientX*3+'px' boxt.style.top=-e.clientY*3+'px' } else{ boxx.onmouseleave=function(){ box.style.width=0+'px' box.style.height=0+'px' boxs.style.display='none' } } } }以上是实例，在运用过程中比例可能受到大盒大小的影响，可以微调一下
