效果体验：http://runjs.cn/detail/dvygyp5t
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> </head> <body> <div id="div1"> <div class="small_pic"> <span class="mark"></span> <span class="float_layer"></span> <img src="http://www.helloweba.com/demo/cloud-zoom/images/smallimage.jpg" /> </div> <div class="big_pic"> <img src="http://www.helloweba.com/demo/cloud-zoom/images/bigimage00.jpg"/> </div> <script type="text/javascript"> $(function(){ $(".mark").hover(function(){ $(".float_layer,.big_pic").show(); },function(){ $(".float_layer,.big_pic").hide(); }) $(".mark").mousemove(function(ev){ var e = ev || event; var left = e.clientX - $("#div1").offset().left-$(".small_pic").offset().left-$(".float_layer").width()/2; var top = e.clientY - $("#div1").offset().top-$(".small_pic").offset().top-$(".float_layer").height()/2; var sDistanceX = $(".mark").outerWidth()-$(".float_layer").outerWidth(); var sDistanceY = $(".mark").outerHeight()-$(".float_layer").outerHeight(); if(left<0){ left = 0; } else if(left > sDistanceX){ left = sDistanceX ; } if(top<0){ top=0; } else if(top > sDistanceY){ top = sDistanceY; } $(".float_layer").css({'left':left,"top":top}); var scoreX = left/sDistanceX; var scoreY = top/sDistanceY; var bDistanceX = $(".big_pic img").outerWidth() - $(".big_pic").outerWidth(); var bDistanceY = $(".big_pic img").outerHeight() - $(".big_pic").outerHeight(); $(".big_pic img").css({left:(-scoreX*bDistanceX),top:(-scoreY*bDistanceY)}); }) }) </script> </body> </html>