简单2:1的放大
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>放大镜效果</title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ display: block; } #pic{ width: 200px; height: 160px; border: 3px solid #ccc; position: relative; float: left; } #pic img{ width: 200px; height: 160px; } .mirror{ width: 100px; height: 80px; background: gold; opacity: .5; position: absolute; left: 0; top: 0; display: none; } #bigbox{ width: 200px; height: 160px; float: left; border: 3px solid #ccc; overflow: hidden; position: relative; } #bigbox img{ position: absolute; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#pic').on({ mousemove:function(e){ $('.mirror').css('display','block') //获取当前鼠标按下的位置相对于box的偏移值 var _left = e.clientX - $('#pic').offset().left - $('.mirror').width()/2; var _top = e.clientY - $('#pic').offset().top - $('.mirror').height()/2; //判断不能超出边界 if(_left<0){ _left = 0 } if(_left>=$('#pic').width() - $('.mirror').width()){ _left=$('#pic').width() - $('.mirror').width() } if(_top<0){ _top = 0 } if(_top>=$('#pic').height() - $('.mirror').height()){ _top = $('#pic').height() - $('.mirror').height() } //在box中移动鼠标,改变放大镜的位置 ($('.mirror')).css({'left':_left,'top':_top}) //根据放大镜的位置,算出右侧大图应该显示的部分 $('#img1').css({'left':-$('.mirror').position().left * 2,'top':-$('.mirror').position().top * 2}) }, //鼠标移出后,放大镜隐藏 mouseleave:function(){ $('.mirror').css('display','none') } }) }) </script> </head> <body> <div id="box"> <div id="pic"> <img src="img/6.jpg"/> <p class="mirror"></p> </div> <div id="bigbox"> <img id="img1" src="img/6.jpg"/> </div> </div> </body> </html>