摘要:本次文章的主要內容是介紹一下淘寶的放大鏡效果是如何實現的,相信很多同學們對這個并不陌生。這個看似感覺很復雜的小功能,實際上原理卻是非常的簡單,下面我們學習一下淘寶放大鏡效果是如何實現的。
前言
這一段時間事情挺多的,一直沒有時間寫文章。這兩天稍微閑了一些,就趁這會閑工夫寫一篇文章。本次文章的主要內容是介紹一下淘寶的放大鏡效果是如何實現的,相信很多同學們對這個并不陌生。這個看似感覺很復雜的小功能,實際上原理卻是非常的簡單,下面我們學習一下淘寶放大鏡效果是如何實現的。
實現過程 項目結構我們整個項目結構并不復雜,由images目錄、jquery-3.2.1.min.js、style.css、main.js、index.html等內容構成。
images目錄。存放項目所使用的圖片素材。
jquery-3.2.1.min.js。jQuery庫(如果你想熟悉一下原生JS,可不選)。
style.css。控制項目css樣式文件。
main.js。控制項目邏輯的js文件。
index.html。控制項目dom結構。
素材 小圖(small.jpg) 原圖(big.jpg) 放大鏡背景圖(mask_bg.jpg) 實現原理放大鏡 == 100*100橘色方塊 簡稱:方塊1
左窗口 == 200*200藍色方塊 簡稱:方塊2
右窗口 == 200*200紫色方塊 簡稱:方塊3
原圖 == 400*400青色方塊 簡稱:方塊4
大致原理如下:
用一個表達式就是:方塊1的left值(或top值)/方塊4的left值(或top值)=(-1)*方塊2的寬度/方塊4的寬度。這里我們需要注意的是方塊1的定位父級是方塊2,方塊4的定位父級是方塊3。另外小圖的長寬與左窗口的長寬保持一致。我們等比例地根據方塊1的top值和left值去修改方塊4的top值和left值,并且方塊超出部分不可見,就可以實現放大鏡效果。
仿淘寶放大鏡效果
.mask 代表 放大鏡
.leftView 代表 左窗口
.rightView 代表 右窗口
.bigImg 代表 原圖
CSS#container{ position: relative; } .leftView{ position: relative; width: 418px; height: 418px; } .smallImg{ max-height: 100%; max-width: 100%; } .mask{ display: none; position: absolute; background: url(./images/mask_bg.png); cursor: move; } .rightView{ position: absolute; left:458px; top:0; width:418px; height:418px; overflow:hidden; } .bigImg{ position: absolute; top:0; left:0; }JS各模塊實現 計算放大鏡的長寬
這里說明一下我們為什么要動態計算放大鏡的長寬,主要原因是原圖的長寬是不確定的。但是我們要滿足放大鏡/右窗口=左窗口/原圖,這里左窗口和右窗口的長寬是確定的,所以放大鏡的長寬是需要根據原圖的長寬進行計算。
function calculateMaskWH(){ var width=$(".leftView").width()/$(".bigImg").width()*$(".rightView").width(); var height=$(".leftView").height()/$(".bigImg").height()*$(".rightView").height(); $(".mask").css({ "width":width, "height":height }); }監聽左窗口mouseover和mouseout事件
在鼠標沒有懸浮在左窗口時,放大鏡、右窗口和原圖是不可見的。當鼠標懸浮在左窗口之上時,放大鏡、右窗口和原圖是可見的。
//監聽鼠標mouseover事件 $(".leftView").on("mouseover",function(){ $(".mask").css("display","block"); $(".rightView").css("display","block"); }); //監聽鼠標mouseout事件 $(".leftView").on("mouseout",function(){ $(".mask").css("display","none"); $(".rightView").css("display","none"); });監聽左窗口mousemove事件
監聽mousemove事件,我們需要干兩件事。第一件事,動態改變放大鏡的top值和left值。第二件事是根據放大鏡的top值和left值,等比例修改原圖的top值和left值。因此我們這里的難點就是如何計算top值和left值。另外,我們要保證放大鏡不能出界。
$(".leftView").on("mousemove",function(event){ //計算放大鏡的left值和top值 var left=event.pageX-$(this).offset().left-$(".mask").width()/2; var top=event.pageY-$(this).offset().top-$(".mask").height()/2; //判斷放大鏡左右是否出界 if(left<0){ left=0 }else if(left>$(this).width()-$(".mask").width()){ left=$(this).width()-$(".mask").width(); } //判斷放大鏡上下是否出現 if(top<0){ top=0; }else if(top>$(this).height()-$(".mask").height()){ top=$(this).height()-$(".mask").height(); } $(".mask").css({ left:left+"px", top:top+"px" }); //計算比例 var rate=$(".bigImg").width()/$(".leftView").width(); $(".bigImg").css({ left:-rate*left+"px", top:-rate*top+"px" }); });JS完整代碼
$(function(){ //計算放大鏡的長寬 calculateMaskWH(); //監聽鼠標mouseover事件 $(".leftView").on("mouseover",function(){ $(".mask").css("display","block"); $(".rightView").css("display","block"); }); //監聽鼠標mouseout事件 $(".leftView").on("mouseout",function(){ $(".mask").css("display","none"); $(".rightView").css("display","none"); }); $(".leftView").on("mousemove",function(event){ //計算放大鏡的left值和top值 var left=event.pageX-$(this).offset().left-$(".mask").width()/2; var top=event.pageY-$(this).offset().top-$(".mask").height()/2; //判斷放大鏡左右是否出界 if(left<0){ left=0 }else if(left>$(this).width()-$(".mask").width()){ left=$(this).width()-$(".mask").width(); } //判斷放大鏡上下是否出現 if(top<0){ top=0; }else if(top>$(this).height()-$(".mask").height()){ top=$(this).height()-$(".mask").height(); } $(".mask").css({ left:left+"px", top:top+"px" }); //計算比例 var rate=$(".bigImg").width()/$(".leftView").width(); $(".bigImg").css({ left:-rate*left+"px", top:-rate*top+"px" }); }); //計算機放大鏡的長寬 function calculateMaskWH(){ var width=$(".leftView").width()/$(".bigImg").width()*$(".rightView").width(); var height=$(".leftView").height()/$(".bigImg").height()*$(".rightView").height(); $(".mask").css({ "width":width, "height":height }); } });最終效果演示
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84242.html
閱讀 1808·2021-11-23 09:51
閱讀 1268·2021-11-18 10:02
閱讀 963·2021-10-25 09:44
閱讀 2099·2019-08-26 18:36
閱讀 1619·2019-08-26 12:17
閱讀 1146·2019-08-26 11:59
閱讀 2746·2019-08-23 15:56
閱讀 3350·2019-08-23 15:05