图片放大镜功能
實現效果演示：
鼠標移入左側縮略圖時，小盒子和右邊大圖顯示，并且小盒子跟隨鼠標移動，右側大圖出現放大效果。我將用三種方法來實現。
1.原生js代碼實現
思路：
1.原圖窗口與放大窗口插入的是同一個圖片，不過原圖窗口的圖片要適當縮小，放大窗口圖片保持原大小，超出部分設置隱藏。
2.先定下放大比例，例如本文原圖大小為10001000，可以把原圖窗口的圖片設為400400，這樣放大窗口就能實現2.5倍的放大效果了。
3.首先實現小框框跟著鼠標移動的功能（小框框不能移出邊界）。
4.再實現放大窗口中的圖片隨著小框框的移動實現自身移動。
5.鼠標(小框框)向右移動，放大窗口中的圖片是要向左移動的！他們的方向總是相反。
6.小框框大小不是隨意設置，與放大倍數有關。
實例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>放大鏡</title><style>*{margin: 0;padding: 0;}.container{width: 400px;height: 250px;position: relative;left: 250px;top: 150px;}.bigBox{width: 500px;height: 500px;border-radius: 50%;position: absolute;left: 430px;border: 1px solid #ccc;overflow: hidden;display: none;}.smallBox{position: absolute;border: 1px solid #ccc;font-size: 0;}.mask{width: 100px;height: 100px;cursor: move;position: absolute;top: 0;left: 0;background-color: rgba(255,255,0,0.4);display: none;}#bigPic{position: absolute;}</style><script>window.onload = function(){var smallBox = document.getElementsByClassName('smallBox')[0];var bigBox = document.getElementsByClassName('bigBox')[0];var mask = document.getElementsByClassName('mask')[0];var box = document.getElementById('box');var bigPic = document.getElementById('bigPic');smallBox.onmouseover = function(){bigBox.style.display = "block";mask.style.display = "block";}smallBox.onmouseout = function(){bigBox.style.display = "none";mask.style.display = "none";}smallBox.onmousemove = function(event){//pageX,pageY//處理兼容性和滾動條var event = event || window.event;var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;var pageX = event.pageX || event.clientX + scollLeft;var pageY = event.pageY || event.clientY + scollTop;var targetX = pageX - box.offsetLeft - mask.offsetWidth/2;var targetY = pageY - box.offsetTop - mask.offsetHeight/2;//左邊界if(targetX<0){targetX = 0;}//上邊界if(targetY<0){targetY = 0;}//右邊界if(targetX>smallBox.offsetWidth - mask.offsetWidth){targetX = smallBox.offsetWidth - mask.offsetWidth}//下邊界if(targetY>smallBox.offsetHeight - mask.offsetHeight){targetY = smallBox.offsetHeight - mask.offsetHeight}//設置小框框的左偏移和上偏移mask.style.left = targetX + 'px';mask.style.top = targetY + 'px';var smallMoveX = smallBox.offsetWidth - mask.offsetWidth;var bigMoveX = bigPic.offsetWidth - bigBox.offsetWidth;var smallMoveY = smallBox.offsetHeight - mask.offsetHeight;var bigMoveY = bigPic.offsetHeight - bigBox.offsetHeight;//設置右邊放大部分跟隨鼠標移動var rateX = bigMoveX/smallMoveX; var rateY = bigMoveY/smallMoveY;bigPic.style.left = -rateX*targetX+'px';bigPic.style.top = -rateY*targetY+'px'; }}</script> </head> <body><div class="container" id="box"><div class="smallBox"><img src="images/2.jpg" alt="" width="400px"><div class="mask"></div></div><div class="bigBox"><img src="images/2.jpg" alt="" id="bigPic"></div></div> </body> </html>演示
2.使用jQuery代碼實現
實現思路跟js一樣，都是原圖窗口與放大窗口插入的是同一個圖片，然后一步一步實現功能。
實例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>放大鏡</title><script src="./js/jquery-3.4.1.min.js"></script><style>*{margin: 0;padding: 0;}#box{width: 600px;height: 337.5px;position: relative;top: 100px;left: 150px;}#leftbox{position: absolute;font-size: 0;border: 1px solid #eee;}#rightbox{width: 600px;height: 600px;border-radius: 50%;position: absolute;left: 650px;border: 1px solid #eee;overflow: hidden;display: none;}#drag{width: 80px;height: 80px;cursor: move;position: absolute;top: 0;left: 0;background-color: rgba(255,255,0,0.2);display: none;}#bigImg{position: absolute;}</style><script>$(function(){var $box = $('#box');var $leftbox = $('#leftbox');var $rightbox = $('#rightbox');var $drag = $('#drag');var $bigImg = $('#bigImg');$leftbox.bind('mouseover',function(){$drag.css('display','block');$rightbox.css('display','block');});$leftbox.bind('mouseout',function(){$drag.css('display','none');$rightbox.css('display','none');});$leftbox.bind('mousemove',function(event){var event = event || window.event;var scrollLeft = $(this).scrollLeft();var scrollTop = $(this).scrollTop();var pageX = event.pageX || event.clientX + event.scrollLeft;var pageY = event.pageY || event.clientY + event.scrollTop;var iX = pageX - $(this).offset().left - $drag.width()/2;var iY = pageY - $(this).offset().top - $drag.height()/2;//判斷邊界var MaxiX = $leftbox.width() - $drag.width();var MaxiY = $leftbox.height() - $drag.height();iX = iX > 0 ? iX : 0;iX = iX < MaxiX ? iX :MaxiX;iY = iY > 0 ? iY : 0;iY = iY < MaxiY ? iY :MaxiY;//設置小框框的左偏移和上偏移$drag.css({top:iY,left:iX});//設置比例var MaxX = $bigImg.width() - $rightbox.width();var MaxY = $bigImg.height() - $rightbox.height();var rateX = MaxX/MaxiX;var rateY = MaxY/MaxiY;//設置右邊放大部分跟隨鼠標移動$bigImg.css({top:-rateY*iY,left:-rateX*iX});});});</script> </head> <body><div id="box" class="container"><div id="leftbox"><div id="drag"></div><img src="./images/a.jpg" width="600px" id="smallImg"></div><div id="rightbox"><img src="./images/a.jpg" id="bigImg"></div></div> </body> </html>演示
3.使用畫布實現
思路：
1.頁面上總共放三塊畫布。一塊放原圖，一塊放波點畫布，一塊放放大時的圖片。
2.波點畫布（設置透明度）跟隨鼠標在原圖上移動。
3.把波點畫布內的圖片截取出來按比例放到右邊更大的畫布上實現放大效果。
實例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>放大鏡</title><style>*{margin: 0;padding: 0;}.container{width: 500px;height: 500px;border: 1px solid #ccc;position: relative;}canvas{border: 1px solid #ccc;}#big-canvas{position: absolute;left: 520px;top: 100px;display: none;}#small-canvas{position: absolute;opacity: 0.5;left: 0;top: 0;display: none;}</style><script>window.onload = function(){var container = document.getElementsByClassName('container')[0];var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');var bigCanvas = document.getElementById('big-canvas');var bigContext = bigCanvas.getContext('2d');var smallCanvas = document.getElementById('small-canvas');var smallContext = smallCanvas.getContext('2d');//圖片畫布var img = new Image();img.src = '../media/images/2.png';img.onload = function(){context.drawImage(img,0,0,500,500);}//波點畫布var imgbd = new Image();imgbd.src = '../media/images/bd.jpg';imgbd.onload = function(){smallContext.drawImage(imgbd,0,0,80,80);}container.onmousemove = function(event){//鼠標移進波點畫布和放大鏡都顯示bigCanvas.style.display = 'block';smallCanvas.style.display = 'block';// x是開始裁剪圖片的位置的橫坐標 x是開始裁剪圖片的位置的縱坐標var x = event.pageX - container.offsetLeft - smallCanvas.offsetWidth/2;var y = event.pageY - container.offsetTop - smallCanvas.offsetHeight/2;//判斷邊界if (x<0) {x = 0;}if (x> canvas.offsetWidth - smallCanvas.offsetWidth) {x = canvas.offsetWidth - smallCanvas.offsetWidth;}if (y<0) {y = 0;}if (y> canvas.offsetHeight - smallCanvas.offsetHeight) {y = canvas.offsetHeight - smallCanvas.offsetHeight;}//清除畫布中的矩形框bigContext.clearRect(0,0,300,300);// 參數：圖像對象，開始剪切的 x 坐標位置，開始剪切的 y坐標位置，被剪切圖像的寬度，被剪切圖像的高度，繪制位置的起始x坐標，起始y坐標，繪制圖像的寬，高bigContext.drawImage(canvas,x,y,80,80,0,0,300,300);// 設置波點畫布的位置smallCanvas.style.left = x + 'px';smallCanvas.style.top = y + 'px';}//鼠標移出波點畫布和放大畫布都隱藏container.onmouseleave = function(){bigCanvas.style.display = 'none';smallCanvas.style.display = 'none';}}</script> </head> <body><div class="container"><!-- 原圖 --><canvas id="canvas" width="500px" height="500px"></canvas><!-- 放大區域 --><canvas id="big-canvas" width="300px" height="300px"></canvas><!-- 波點區域 --><canvas id="small-canvas" width="80px" height="80px"></canvas></div> </body> </html>實例
總結
- 上一篇： 猎豹android studio,小米方
- 下一篇： 计算机信息技术教学工作计划,信息技术学期