首先需要两个盒子 一个盒子是展示盒子里面放整张图片,在这个盒子里还需要套一个半透明的盒子
跟着鼠标移动来预览放大的区域,当然还需要一个用来展现放大镜效果的盒子 无非原理就是把整张照片的一部分放展示在盒子内 其他部分在盒子外隐藏 放大的区域要按照一定的比例展示出来
实现这个效果的难点有这几个
1.鼠标在图片区域时，透明小区域出现，放大的区域出现
解决的方法是通过onmourseover事件监听鼠标如果移动到盒子上让透明区域和放大区域的disolay变为block
2.鼠标移出图片时，透明小区域消失，放大区域消失
和上面相反使用onmourseout属性离开盒子时让透明区域和放大区域的disolay变为none
3.透明小区域随着鼠标移动
1.通过鼠标onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display，置为block
2.通过鼠标onmourseout监听鼠标的略过图片，改变透明小区域和放大区域的display，置为none
3.通过event对象获取鼠标的当前坐标位置，然后通过放入鼠标事件onmoursemove监听，不停的将透明小区域的top和left变为X轴和Y轴的值