? ? ?我們平時在瀏覽商品網(wǎng)站的時候，當鼠標滑過商品的時候，就會在旁邊看到該商品對應的放大效果，這樣你就能更仔細的對商品進行分析。作為一個前端開發(fā)人員，你是不是很好奇這個效果的實現(xiàn)的方法。我本人就是屬于，喜歡瀏覽各種網(wǎng)站，好奇他們的效果實現(xiàn)，了解跟找到解決的方法，不斷的學習。
? ? 而這個放大鏡效果關鍵在于放大的比例：
? ?放大比例 = 左邊盒子的大小 / 里面進行剪切的盒子大小，該比例值作為右邊盒子顯示內(nèi)容的大小
? 代碼如下
CSS樣式：
<!DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8">
????????<title></title>
????????<style?type="text/css">
????????????body,ul,li{
????????????????padding:?0;
????????????????margin:?0;
????????????}
????????????li{
????????????????list-style:?none;
????????????}
????????????img{
????????????????display:?block;
????????????????border:?none;
????????????}
????????????#zoomBox{
????????????????position:?relative;
????????????????left:?40px;
????????????????top:?40px;
????????????????width:?400px;
????????????????border:?1px?solid?#CECECE;
????????????}
????????????#midArea{
????????????????width:?400px;
????????????????height:?400px;
????????????????overflow:?hidden;
????????????}
????????????#midArea?img{
????????????????width:?400px;
????????????????height:?400px;
????????????}
????????????#zoom{
????????????????display:?none;
????????????????position:?absolute;
????????????????width:?200px;
????????????????height:?200px;
????????????????background:?yellow;
????????????????opacity:?.3;
????????????????cursor:?move;
????????????}
????????????#bigArea{
????????????????display:?none;
????????????????position:?absolute;
????????????????left:?400px;
????????????????top:?-1px;
????????????????width:?400px;
????????????????height:?400px;
????????????????border:?1px?solid?#CECECE;
????????????????overflow:?hidden;
????????????}
????????????#bigArea?img{
????????????????position:?absolute;
????????????????width:?800px;
????????????????height:?800px;
????????????}
????????????#smallArea?li{
????????????????float:?left;
????????????????margin:?10px;
????????????????width:?50px;
????????????????height:?50px;
????????????}
????????????#smallArea?li?img{
????????????????width:?50px;
????????????????height:?50px;
????????????}
????????</style>
????</head>
????<body>
????????<div?id="zoomBox">
????????????<div?id="midArea">
????????????????<img?src="img/m01.jpg">
????????????????<div?id="zoom"></div>
????????????</div>
????????????<div?id="bigArea">
????????????????<img?src="img/m01.jpg">
????????????</div>
????????????<ul?id="smallArea">
????????????????<li>
????????????????????<img?src="img/m01.jpg">
????????????????</li>
????????????????<li>
????????????????????<img?src="img/m02.jpg">
????????????????</li>
????????????</ul>
????????</div>
????</body>
</html>
JS代碼
function?$(id){
????return?document.getElementById(id);
}
function?Zoom(){
????this.zoomBox?=?$("zoomBox");
????this.midArea?=?$("midArea");
????this.midImg?=?this.midArea.children[0];
????this.zoom?=?$("zoom");
????this.bigArea?=?$("bigArea");
????this.bigImg?=?this.bigArea.children[0];
????this.smallArea?=?$("smallArea");
????this.smallList?=?this.smallArea.children;
????this.midArea.onmouseover?=?()=>{
????????this.zoom.style.display?=?"block";
????????this.bigArea.style.display?=?"block";
????}
????this.midArea.onmouseout?=?()=>{
????????this.zoom.style.display?=?"none";
????????this.bigArea.style.display?=?"none";
????}
????this.midArea.onmousemove?=?(e)=>{
????????let?evt?=?e?||?event;
????????let?x?=?evt.pageX?-?this.zoomBox.offsetLeft?-??this.zoom.offsetWidth/2;
????????let?y?=?evt.pageY?-?this.zoomBox.offsetTop?-??this.zoom.offsetHeight/2;
????????/*let?x?=?evt.offsetX?-??this.zoom.offsetWidth/2;
????????let?y?=?evt.offsetY?-??this.zoom.offsetHeight/2;*/
????????let?maxW?=?this.midArea.offsetWidth?-?this.zoom.offsetWidth;
????????let?maxH?=?this.midArea.offsetHeight?-?this.zoom.offsetHeight;
????????x?=?x?<=?0???0?:?x?>=?maxW???maxW?:?x;
????????y?=?y?<=?0???0?:?y?>=?maxH???maxH?:?y;
????????this.zoom.style.left?=??x?+?"px";
????????this.zoom.style.top?=?y?+?"px";
????????this.bigImg.style.left?=??-?this.zoom.offsetLeft/this.midArea.offsetWidth?*?this.bigImg.offsetWidth?+?"px";
????????this.bigImg.style.top?=??-?this.zoom.offsetTop/this.midArea.offsetHeight?*?this.bigImg.offsetHeight?+?"px";
????}
????for(let?i?=?0;?i?<?this.smallList.length;?i++){
????????this.smallList[i].onclick?=?()=>{
????????????this.midImg.src?=?this.smallList[i].children[0].src;
????????????this.bigImg.src?=?this.smallList[i].children[0].src;
????????}
????}
