這篇文章給大家分享的是有關(guān)JavaScript實(shí)現(xiàn)淘寶放大鏡的方法有哪些的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)公司專注于商水企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。商水網(wǎng)站建設(shè)公司,為商水等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站建設(shè),專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)這個(gè),當(dāng)你的鼠標(biāo)移動(dòng)到左邊的主圖上時(shí),右邊會(huì)出現(xiàn)一個(gè)放大的圖,暫且就把這個(gè)叫做放大鏡吧。
大概的做法第一種,左邊一個(gè)小圖,右邊一個(gè)原圖,當(dāng)鼠標(biāo)在小圖上移動(dòng)的時(shí)候,通過更改left和top的值來實(shí)現(xiàn)同步移動(dòng)(原圖的position屬性設(shè)置為absolute)
第二種,鼠標(biāo)在小圖上移動(dòng)的時(shí)候,通過改變?cè)瓐D的background-position的值來同步移動(dòng)。
第一步,獲取鼠標(biāo)在小圖上的位置,并且定位好跟隨鼠標(biāo)的方塊(你應(yīng)該知道是哪個(gè)方塊吧。。)的位置。
//e.offsetX ,offsetY是鼠標(biāo)的位置 //方塊的left top在你的鼠標(biāo)的左上方(網(wǎng)頁左上角是原點(diǎn)),因此是減去一個(gè)方塊的一半。 var x = e.offsetX - 方塊.offsetWidth / 2; var y = e.offsetY - 方塊.offsetHeight / 2; 方塊.style.left = x + 'px'; 方塊.style.top = y + 'px';
這明顯是不足夠的!
還需要考慮極端位置/情況
如果只用上面的設(shè)置,那么當(dāng)你的鼠標(biāo)移動(dòng)到圖片邊緣的時(shí)候,方塊有一半會(huì)出現(xiàn)在圖片外。
正確的應(yīng)該是當(dāng)你的方塊觸碰到邊緣的時(shí)候,你的方塊就不能在移動(dòng)了,盡管你的鼠標(biāo)還在往下圖中“鼠標(biāo)的有效活動(dòng)區(qū)域”外移動(dòng)。
那么得加點(diǎn)代碼
if (x < 0) { x = 0; } if (y < 0) { y = 0; } if (x > 小圖.offsetWidth - 方塊.offsetWidth) { x = 小圖.offsetWidth - 方塊.offsetWidth; } if (y > 小圖.offsetHeight - 方塊.offsetHeight) { y = 小圖.offsetHeight - 方塊.offsetHeight; }
第二步,控制大圖里的left - top或者background-position
//第一種方法:需要注意的是這里的left 和 top得反過來,你鼠標(biāo)在小圖上往下移的時(shí)候,對(duì)應(yīng)的大圖其實(shí)是往上移的。 //所以:大圖上的left = -小圖上的left * 他們的縮放倍率 大圖.style.display = "block"; 大圖.style.left = -x * 大圖.offsetWidth / 小圖.offsetWidth + 'px'; 大圖.style.top = -y * 大圖.offsetHeight / 小圖.offsetHeight + 'px'; //第二種方法,這里需要注意 backgroundPosition的值是從0 - 100%的(得用百分比表示); //需要注意的是何時(shí)為百分百,從上面的極端情況判定我們可以知道 //x 是從0 到 mask.offsetWidth - rect.offsetWidth; //因此這就是0 - 100%;y同理 大圖.style.display = "block"; 大圖.style.backgroundPosition =`${x/(mask.offsetWidth - rect.offsetWidth)*100}% ${y/(mask.offsetHeight- rect.offsetHeight)*100}%`;注意事項(xiàng)
我們上面說在小圖img上綁定mousemove事件來定位方塊,其實(shí)實(shí)際操作上,我們不能直接用img來綁定,而是得用一個(gè)和img一樣大小遮罩層來綁定,不然在你鼠標(biāo)移動(dòng)的時(shí)候,圖片會(huì)瘋狂閃爍,瘋狂!crazy!
還有 就是函數(shù)節(jié)流,這個(gè)想節(jié)流就節(jié)流吧。
還有個(gè)很重要的,就是右邊那個(gè)顯示大圖的p的大小,一定得是小圖上的方塊大小 * 縮放倍率的大小,如果過大,則會(huì)多出空白,過小,顯示不完全。下面有代碼,你可以帶回家瘋狂測試。
我知道我可能說的不是很詳細(xì),所以。。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>tb放大鏡</title> <style> .small-box { position: relative; height: 300px; } .small-pic { width: auto; height: 300px; } .mask { width: 526px; position: absolute; top: 0; left: 0; z-index: 1; height: 100%; cursor: crosshair; } .rect { position: absolute; top: 0; left: 0; width: 100px; height: 100px; opacity: .5; background-color: red; z-index: 0; } .big-box { display: inline-block; position: relative; width: 266px; height:266px; border: 1px solid red; overflow: hidden; } .big-pic { position: absolute; width: 1400px; height: 798px; top: 0; left: 0; } .big-pic2{ display: inline-block; width: 266px; height:266px; background-size: auto 798px; background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550846791000&di=15edaf7bce643e13b65f70c82d74de30&imgtype=0&src=http%3A%2F%2Fpic.92to.com%2F360%2F201604%2F08%2F19864861_13.jpg"); background-position: 0 0; } </style> </head> <body> <div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550846791000&di=15edaf7bce643e13b65f70c82d74de30&imgtype=0&src=http%3A%2F%2Fpic.92to.com%2F360%2F201604%2F08%2F19864861_13.jpg" alt=""> <div></div> <div style="display: none"></div> </div> <div> <img style="display: none" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550846791000&di=15edaf7bce643e13b65f70c82d74de30&imgtype=0&src=http%3A%2F%2Fpic.92to.com%2F360%2F201604%2F08%2F19864861_13.jpg" alt=""> </div> <div> <div></div> </div> </body> <script> window.onload = function () { var mask = document.getElementsByClassName('mask')[0]; //為什么要用mask呢?不直接用選中small-pic。 //如果直接選擇圖片標(biāo)簽來綁定下面的mouseover事件,圖片會(huì)一直閃爍!所以我們得給他一個(gè)和圖片一樣大小的遮罩層 var rect = document.getElementsByClassName('rect')[0]; var bPic = document.getElementsByClassName("big-pic")[0]; var bPic2 = document.getElementsByClassName("big-pic2")[0]; mask.addEventListener('mousemove', throttle(magnifier,100)) function magnifier(e){ //方塊的left top在你的鼠標(biāo)的左上方(網(wǎng)頁左上角是原點(diǎn)),因此是減去一個(gè)方塊的一半。 var x = e.offsetX - rect.offsetWidth / 2; var y = e.offsetY - rect.offsetHeight / 2; //極端情況,也就是當(dāng)你的鼠標(biāo)上的方塊到四個(gè)邊的邊緣的時(shí)候。 if (x < 0) { x = 0; } if (y < 0) { y = 0; } if (x > mask.offsetWidth - rect.offsetWidth) { x = mask.offsetWidth - rect.offsetWidth; } if (y > mask.offsetHeight - rect.offsetHeight) { y = mask.offsetHeight - rect.offsetHeight; } //方塊定位 rect.style.display="block"; rect.style.left = x + 'px'; rect.style.top = y + 'px'; //第一種方法:需要注意的是這里的left 和 top得反過來,你鼠標(biāo)在小圖上往下移的時(shí)候,對(duì)應(yīng)的大圖其實(shí)是往上移的。 //所以:大圖上的left = -小圖上的left * 他們的縮放倍率 bPic.style.display = "block"; bPic.style.left = -x * bPic.offsetWidth / mask.offsetWidth + 'px'; bPic.style.top = -y * bPic.offsetHeight / mask.offsetHeight + 'px'; //第二種方法,這里需要注意 backgroundPosition的值是從0 - 100%的(得用百分比表示); //需要注意的是何時(shí)為百分百,從上面的極端情況判定我們可以知道 //x 是從0 到 mask.offsetWidth - rect.offsetWidth; //因此這就是0 - 100%;y同理 bPic2.style.display = "block"; bPic2.style.backgroundPosition =`${x/(mask.offsetWidth - rect.offsetWidth)*100}% ${y/(mask.offsetHeight- rect.offsetHeight)*100}%`; } mask.addEventListener('mouseout',function(){ rect.style.display = "none"; bPic.style.display = "none"; bPic2.style.display = "none"; }) //函數(shù)節(jié)流 function throttle(fn, delay) { var pre = new Date().getTime(); return function () { var context = this; var args = arguments; var now = new Date().getTime(); if (now - pre > delay) { fn.apply(this,arguments); } } } } </script> </html>
感謝各位的閱讀!關(guān)于JavaScript實(shí)現(xiàn)淘寶放大鏡的方法有哪些就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
新聞名稱:JavaScript實(shí)現(xiàn)淘寶放大鏡的方法有哪些-創(chuàng)新互聯(lián)
本文URL:http://muchs.cn/article36/dhedsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號(hào)、Google、網(wǎng)站改版、品牌網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、云服務(wù)器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容