實現圖片放大鏡的原理：
- 給放大鏡元素一個對應的html元素為<div class='right'>
- 設置這個div的寬高固定為某個值（350px，350px）
- 設置div的css為超出部分隱藏
- div中嵌套子元素img設置寬高固定為某個值（2560px，1600px）
- 通過數學函數計算，移動div的x軸和y軸的滾動條，正好讓放大鏡顯示刺客鼠標在大圖的那一塊區域。
部分函數功能介紹：
attr()方法：獲取或更改對應的DOM元素的屬性值
- 獲取：$("div").attr("屬性名稱")
- 更改：$("div").attr("屬性名稱","屬性值")
mouseover()：鼠標移入事件
mouseout()：鼠標移出事件
scrollTop()：獲取或設置匹配元素相對滾動條頂部的偏移
scrollLeft()：獲取或設置匹配元素相對滾動條左側的偏移
源代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery實現放大鏡效果</title> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <style> #contain{ width:80%; height:500px; margin:0 auto; } .left{ float:left; } .right{ float:left; width:350px; height:350px; overflow:hidden;/*超出部分隱藏*/ padding:0px; display:none;/*默認先不顯示*/ } .up{ width:320px; height:200px; padding:30px; } .up img{ width:320px; height:200px; } .down{ padding:20px; padding-left:35px; } .down img{ width:64px; height:40px; border:3px solid #ccc; } </style> </head> <body> <div id="contain"> <div class="left"> <div class="up"> <img src="img/06.jpg" bigimage> </div> <div class="down"> <img src="img/06.jpg" smallimage> <img src="img/07.jpg" smallimage> <img src="img/08.jpg" smallimage> <img src="img/09.jpg" smallimage> </div> </div> <div class="right"> <img src="" mirror> </div> </div> </body> <script> /** * 完成下面選擇圖片的效果： * 1.當鼠標放置在下面的小圖片時，改變邊框屬性 * 2.更改含有bigimage的img標簽的src，進行圖片更換 */ $("[smallimage]").mouseover(function(){ var address = $(this).css("border","3px solid red").attr("src"); $("[bigimage]").attr("src",address); }).mouseout(function(){ $(this).css("border","3px solid #ccc"); }); /** * 大圖鼠標移動事件： * 1.設置mirror所在的img標簽的display屬性為block，即讓它顯示 * 2.當鼠標在內部移動的時候，通過計算，在mirror中進行放大顯示 * 鼠標移出事件： * 設置mirror不可見 display:none */ $("[bigimage]").mousemove(function(even){ //獲取大圖的相對文檔的偏移量 var offset = $(this).offset(); //獲取鼠標相對於大圖左上角的x軸偏移量 var x = even.pageX - offset.left; //獲取鼠標相對於大圖左上角的y軸偏移量 var y = even.pageY - offset.top; //設置放大鏡放大倍數，可自行設置 var multiple = 8; //獲取放大鏡所在div的寬度和高度 var mirrorwidth = $(".right").width(); var mirrorHeight = $(".right").height(); //獲取bigimage此時的src的值 var address = $(this).attr("src"); //更改放大鏡的src的值，切換圖片 $("[mirror]").attr("src",address); $(".right").css("display","block").scrollLeft(Math.max(x*multiple - mirrorwidth/2.0)).scrollTop(Math.max(y*multiple - mirrorHeight/2.0)); }).mouseout(function(){ $(".right").css("display","none"); }); </script> </html>
效果圖：
1.鼠標經過下面的小圖片：
2.放大效果：
