實現(xiàn)放大鏡效果使用到的功能包括：相對定義、絕對定位漾抬、鼠標事件宿亡、顯示隱藏等，大概思路是有兩個盒子纳令，當鼠標離開小盒子里的圖片的時候挽荠，大的盒子隱藏。廢話不多說平绩，直接上代碼圈匆，記得引入jQuery插件烦绳！引入jQuery插件菱属！引入jQuery插件雪情！
布局：
<div id="box">
? ? ? ? <div id="small">
? ? ? ? ? ? <img src="./img/a (3).jpg" alt="">
? ? ? ? ? ? <div id="yi"></div>
? ? ? ? </div>
? ? ? ? <div id="big">
? ? ? ? ? ? <img src="./img/a (3).jpg" alt="">
? ? ? ? </div>
? ? </div>
樣式：
*{
? ? margin: 0;
? ? padding: 0;
}
#box{
? ? width: 1000px;
? ? height: 500px;
? ? border: 1px solid;
}
#box>#small{
? ? width: 320px;
? ? height: 240px;
? ? overflow: hidden;
? ? position: relative;
}
#box>#small>img{
? ? width: 100%;
? ? height: 100%;
}
#yi{
? ? width: 100px;
? ? height: 100px;
? ? background: rgba(8, 8, 8, 0.5);
? ? position: absolute;
? ? left: 0;
? ? top: 0;
? ? display: none;
}
#box>#big{
? ? width: 400px;
? ? height: 300px;
? ? overflow: hidden;
? ? position: absolute;
? ? top: 0%;
? ? left: 320px;
? ? display: none;
}
#box>#big>img{
? ? width: 1200px;
? ? height: 960px;
}
邏輯代碼：
$('#small').mousemove(function (e) {
? ? // 獲取x坐標
? ? var x = e.pageX;
? ? // 獲取y坐標
? ? var y = e.pageY;
? ? // 鼠標移動時众羡，顯示放大鏡籽懦，并且跟隨鼠標移動苦掘。
? ? $("#yi").css({
? ? ? ? display: "block",
? ? ? ? left: x - 50 + "px",
? ? ? ? top: y - 50 + "px"
? ? });
? ? // 顯示bigdiv
? ? $('#big').css({
? ? ? ? display: 'block'
? ? })
? ? // 鼠標移動時畸写，改變大圖位置
? ? $("#big img").css({
? ? ? ? marginLeft: -x * 4 + 200 + "px",
? ? ? ? marginTop: -y * 4 + 200 + "px"
? ? })
? ? ? ? //放鼠標離開時贴铜，讓放大鏡和大圖隱藏
? ? ? ? $('#small').mouseout(function () {
? ? ? ? ? ? $("#yi").css({
? ? ? ? ? ? ? ? display: "none"
? ? ? ? ? ? });
? ? ? ? ? ? $("#big").css({
? ? ? ? ? ? ? ? display: "none"
? ? ? ? ? ? })
? ? ? ? })
})
