图片放大镜功能
實現(xiàn)效果演示：
鼠標移入左側縮略圖時，小盒子和右邊大圖顯示，并且小盒子跟隨鼠標移動，右側大圖出現(xiàn)放大效果。我將用三種方法來實現(xiàn)。
1.原生js代碼實現(xiàn)
思路：
1.原圖窗口與放大窗口插入的是同一個圖片，不過原圖窗口的圖片要適當縮小，放大窗口圖片保持原大小，超出部分設置隱藏。
2.先定下放大比例，例如本文原圖大小為10001000，可以把原圖窗口的圖片設為400400，這樣放大窗口就能實現(xiàn)2.5倍的放大效果了。
3.首先實現(xiàn)小框框跟著鼠標移動的功能（小框框不能移出邊界）。
4.再實現(xiàn)放大窗口中的圖片隨著小框框的移動實現(xiàn)自身移動。
5.鼠標(小框框)向右移動，放大窗口中的圖片是要向左移動的！他們的方向總是相反。
6.小框框大小不是隨意設置，與放大倍數(shù)有關。
實例
<!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代碼實現(xiàn)
實現(xiàn)思路跟js一樣，都是原圖窗口與放大窗口插入的是同一個圖片，然后一步一步實現(xiàn)功能。
實例
<!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.使用畫布實現(xiàn)
思路：
1.頁面上總共放三塊畫布。一塊放原圖，一塊放波點畫布，一塊放放大時的圖片。
2.波點畫布（設置透明度）跟隨鼠標在原圖上移動。
3.把波點畫布內的圖片截取出來按比例放到右邊更大的畫布上實現(xiàn)放大效果。
實例
<!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);// 參數(shù)：圖像對象，開始剪切的 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><!-- 放大區(qū)域 --><canvas id="big-canvas" width="300px" height="300px"></canvas><!-- 波點區(qū)域 --><canvas id="small-canvas" width="80px" height="80px"></canvas></div> </body> </html>實例
總結
- 上一篇： 猎豹android studio,小米方
- 下一篇： 计算机信息技术教学工作计划,信息技术学期