圖片區域性放大鏡
阿新 • • 發佈：2019-02-15
<!-- 效果：當滑鼠移到小圖片上面時顯示放大鏡 和 放大的區域性圖片 原理： 1、放大鏡是一個絕對定位的半透明的div、通過樣式left和top限控制放大鏡的移動（只能在小圖片容器內移動） 2、放大後的區域性圖片的大小跟放大鏡的大小是成比例的、小圖片和大圖片的比例也是一樣的 3、通過設定放大後顯示圖片的容器的寬高再把溢位隱藏就可以顯示放大的區域性圖片 4、放大鏡移動的時候、大圖片容器的滾動條也跟著滾動（按照比例滾動） --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>圖片區域性放大</title> <style> *{margin:0px;padding:0px;} #small{position:relative;} #small div{display:none;cursor:move;position:absolute;left:0px;top:0px;background:blue;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity:0.2;opacity:0.2;} #big{position:absolute;top:0px;overflow:hidden;}/*把溢位隱藏*/ </style> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script> var ratio=3; //放大比例 var small_img_width=500; //小圖片的寬 var small_img_height=287; //小圖片的高 var big_width=600; //放大後的區域性圖片的寬 var big_height=400; //放大後的區域性圖片的高 function init(){ //設定好小圖片和小圖片的容器的寬度和寬度、容器如果不設定寬度是預設100%的 $("#small,#small img").css({"width":small_img_width+"px","height":small_img_height+"px"}); //根據放大後的區域性圖片的寬高和放大比例設定放大鏡的寬高 $("#small div").css({"width":big_width/ratio+"px","height":big_height/ratio+"px"}); //設定好放大後的區域性圖片的寬高 $("#big").css({"width":big_width+"px","height":big_height+"px","left":small_img_width+10+"px"}) //根據放大比例和小圖片的寬高設定大圖片的寬高 $("#big img").css({"width": small_img_width * ratio + "px","height": small_img_height * ratio + "px"}) } $(function(){ init(); $("#small").mousemove(function(e){ //放大鏡的left=滑鼠的橫座標-放大鏡自身的一半寬度（因為需要滑鼠在放大鏡的中間） var div_x=e.pageX-$("#small div").width()/2; //放大鏡的top=滑鼠的縱座標-放大鏡自身的一半高度（因為需要滑鼠在放大鏡的中間） var div_y=e.pageY-$("#small div").height()/2; //放大鏡的left允許值=小圖片的容器寬度-放大鏡自身的寬度 var div_border_x=$("#small").width()-$("#small div").width(); //放大鏡的top允許值=小圖片的容器高度-放大鏡自身的高度 var div_border_y=$("#small").height()-$("#small div").height(); //如果放大鏡的top的允許值<0,那麼top設為0 if (div_y < 0) { $("#small div").css("top", "0px"); } //如果放大鏡的top>放大鏡的top的允許值,那麼top設為放大鏡允許的最大的top值 else if (div_y>div_border_y) { $("#small div").css("top", div_border_y+"px"); } //如果放大鏡的top不超出邊界、直接使用放大鏡的div_y else { $("#small div").css("top", div_y + "px"); } if (div_x < 0) { $("#small div").css("left", "0px"); } else if (div_x>div_border_x) { $("#small div").css("left", div_border_x+"px"); } else { $("#small div").css("left", div_x + "px"); } //大圖片區域性容器的滾動條根據放大鏡的top和放大比例改變滾動的高度 $("#big").scrollTop(parseInt($("#small div").css("top"))*ratio); $("#big").scrollLeft(parseInt($("#small div").css("left"))*ratio); }); //當滑鼠移到小圖片容器上面觸發的事件 $("#small").hover(function(e){ //顯示放大鏡 $("#small div").show(); //把大圖片的路徑設為小圖片的路徑 $("#big img").attr("src",$("#small img").attr("src")); //顯示大圖片區域性容器 $("#big").show(); },function(){ //當滑鼠移開小圖片容器後把放大鏡和大圖片區域性容器隱藏 $("#small div").hide(); $("#big").hide(); }); }); </script> </head> <body> <div id="small"> <img src="imgs/混世小色醫2.png"/> <div></div> </div> <div id="big"> <img/> </div> </body> </html>