在购物网站的展示页面上，随着鼠标的移动而移动焦点的放大镜的效果非常常见，但是有很多方法可以实现这一效果。 这里列举一个。
我需要大照片和小照片。 小照片显示在屏幕上，大照片用于构建放大效果。
divid=' mirror '/div divid=' pic ' img src=' e :/com/front _ end/source/middle _ about.jpg '/div这张照片很小
接下来是css代码
syle type=' text/CSS ' body * { margin : padding: 0； } #mirror{position: absolute； Overflow :隐藏； 高： 200 px； width: 200px； border-radius: 110px； border :10 px黑实体； 后台- image : URL (e :/com/front _ end/source/middle _ about1. jpg ' )； (}/style其中用border-radius和border在放大镜上加圆形边框，半径根据div的宽度高度和边框宽度() ) 200(10 )/2进行计算。 mirror块的背景图是一个大图，不显示超出的部分。 这样，块外的部分是原来的小图，里面是大图，会产生放大效果。 设置为绝对位置后，可以使用以下js代码改变top和left，使其与鼠标一起移动。
接下来是js代码。 要实现的功能是根据鼠标的移动移动放大镜div块(clientX、clientY、top和left )。 通过设置背景posi iton，mirror块中的背景始终是“隐藏的位置”。 值得注意的是，background-position的计算(需要减号)和event和window.event都必须被侦听才能在发生鼠标移动事件时检索事件。
script type=' text/JavaScript ' var mirror=document.getelementbyid (' mirror )； 功能移动(e ) { var x=e.clientX； var y=e.clientY； varmirrorheight=mirror.offsetheight； varmirrorwidth=mirror.offsetwidth； var picheight=document.getelementbyid (pic ).getelementsbytagname ) )0).offsetheight； var picwidth=document.getelementbyid (pic ).getelementsbytagname ) )0).offsetwidth； if (x=picwidth y=picheight x=-picwidth y=-picheight ) mirror.style.left=x-mirror width/2 ' px '； mirror.style.top=y-mirror height/2 ' px '； var bl=2*mirror.offsetLeft； var bt=2*mirror.offsetTop； mirror.style.background position='-' (blmirrorwidth/2 ) ' px ' '-' (bt mirrorHeight/2 ) ' px '； }window.onmousemove=function(e ) { var e=e？ e:window.event； 移动(e； (} /script效果仍然可见：