放大鏡制作

<div class="box" id="box"><!--左側(cè)的盒子--><div class="small"><!--圖片--><img src="images/big.jpg" width="350" class="aaa" alt=""/><!--黃色小盒子--><div class="mask"></div></div><!--右側(cè)的盒子--><div class="big"><!--右側(cè)盒子內(nèi)的大圖片--><img src="images/big.jpg" width="800" alt=""/></div> </div> * {margin: 0;padding: 0;}.box {width: 350px;height: 350px;margin: 100px;border: 5px solid black;position: relative;}.big {width: 400px;height: 400px;position: absolute;top: 0;left: 360px;border: 1px solid #ccc;overflow: hidden;display: none;}.mask {width: 175px;height: 175px;background: rgba(255, 255, 0, 0.4);position: absolute;top: 0px;left: 0px;cursor: move;display: none;}.small {position: relative;}.aaa {vertical-align: middle;}.big {position: relative;top: -350px;}.big img {position: absolute;} <script>//步驟分析：//1 鼠標(biāo)移入移出，顯示隱藏左側(cè)遮罩層與右側(cè)大盒子//2 遮罩層居中跟隨鼠標(biāo)//3 給運動位置設(shè)置運動邊界//4 設(shè)置右側(cè)大圖的對應(yīng)運動即可//1 獲取元素var box = document.getElementById("box");//最外側(cè)的父盒子var smallBox = box.children[0];//左側(cè)的父盒子var mask = smallBox.children[1];//遮罩層黃盒子var bigBox = box.children[1];//右側(cè)的父盒子var bigImg = bigBox.children[0];//2 設(shè)置移入移出效果box.onmouseover = function () {mask.style.display = "block";bigBox.style.display = "block";};box.onmouseout = function () {mask.style.display = "none";bigBox.style.display = "none";};//3 鼠標(biāo)在smallBox內(nèi)部移動時，居中跟隨smallBox.onmousemove = function (e) {var e = e || window.event;//事件對象兼容//計算mask的運動位置 : 鼠標(biāo)坐標(biāo) - box的外部距離 - mask寬高的一半var x = e.clientX - box.offsetLeft - mask.offsetWidth / 2;var y = e.clientY - box.offsetTop - mask.offsetHeight / 2;//4 設(shè)置運動的邊界x = x < 0 ? 0 : x;//最小值檢測y = y < 0 ? 0 : y;//計算最大值var maxLeft = smallBox.offsetWidth - mask.offsetWidth;var maxTop = smallBox.offsetHeight - mask.offsetHeight;x = x > maxLeft ? maxLeft : x;//最大值檢測y = y > maxTop ? maxTop : y;//設(shè)置給mask的left與topmask.style.left = x + "px";mask.style.top = y + "px";//設(shè)置右側(cè)的大圖對應(yīng)運動//先計算出運動的比例//1 情況1所有的盒子均對應(yīng)成比例var biliX = mask.offsetWidth / (bigBox.offsetWidth - 2);//注意，邊框不是可運動的范圍，計算時進(jìn)行去除即可var biliY = mask.offsetHeight / (bigBox.offsetHeight - 2);//由于，運動的步長為小步長，比例也是小比例，采用除法bigImg.style.left = -x / biliX + "px";bigImg.style.top = -y / biliY + "px";//2 情況2如果盒子不是等比例，可以采用可運動距離比的計算方式//總距離= 步長*步數(shù) 在這個操作中步數(shù)是固定的(靠一個事件觸發(fā)，次數(shù)是一定的)//總距離可求，計算出總距離比，就可以計算出某個元素運動的步長};</script>

效果圖為：

images

總結(jié)

以上是生活随笔為你收集整理的放大镜制作（1）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。