js模擬實(shí)現(xiàn)京東詳情頁(yè)圖片放大效果
更新時(shí)間:2021年11月16日 15:11:20 作者:android_yun
這篇文章主要為大家詳細(xì)介紹了js模擬實(shí)現(xiàn)京東詳情頁(yè)圖片放大效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)京東詳情頁(yè)圖片放大的具體代碼,供大家參考,具體內(nèi)容如下
效果:
html:
<div class="preview_img"> <img src="upload/s3.png" alt=""> <div class="mask"></div> <div class="big"> <img src="upload/big.jpg" alt="" class="bigImg"> </div> </div>
css:
.preview_img { position: relative; height: 398px; border: 1px solid #ccc; } .mask { display: none; position: absolute; width: 300px; height: 300px; top: 0; left: 0; background: #FEFE4F; opacity: .5; border: 1px solid #ccc; cursor: move; } .big { display: none; position: absolute; width: 550px; height: 550px; top: 0; left: 410px; z-index: 999; border: 1px solid #ccc; overflow: hidden; } .big img { position: absolute; left: 0; top: 0; }
js(重點(diǎn)):
window.addEventListener('load',function(){ var preview_img = document.querySelector('.preview_img'); var mask = this.document.querySelector('.mask'); var big = this.document.querySelector('.big'); var bigImg = this.document.querySelector('.bigImg'); //鼠標(biāo)經(jīng)過(guò) preview_img.addEventListener('mouseover',function(){ mask.style.display = 'block'; big.style.display = 'block'; }) //鼠標(biāo)移出去 preview_img.addEventListener('mouseout',function(){ mask.style.display = 'none'; big.style.display = 'none'; }) //鼠標(biāo)移動(dòng)的時(shí)候 preview_img.addEventListener('mousemove',function(e){ //鼠標(biāo)在盒子內(nèi)的坐標(biāo) var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; //遮擋層移動(dòng)的距離 var maskX = x - mask.offsetWidth/2; var maskY = y -mask.offsetHeight/2; //大圖移動(dòng)距離 //遮擋層的最大移動(dòng)距離 var maskMaxX = preview_img.offsetWidth - mask.offsetWidth; var maskMaxY = preview_img.offsetHeight - mask.offsetHeight; //如果X坐標(biāo)小于0 就讓它停留在0 的位置 if (maskX <= 0) { maskX = 0; }else if (maskX >= maskMaxX) { maskX = maskMaxX; } //如果Y坐標(biāo)小于0 就讓它停留在0 的位置 if (maskY <= 0) { maskY = 0; }else if (maskY >= maskMaxY) { maskY = maskMaxY; } //遮擋層移動(dòng) mask.style.left = maskX + 'px'; mask.style.top = maskY + 'px'; //大圖片最大移動(dòng)距離 var bigMaxX = bigImg.offsetWidth - big.offsetWidth; var bigMaxY = bigImg.offsetHeight - big.offsetHeight; //大圖片的移動(dòng)距離 X Y // 大圖片的移動(dòng)距離 = 遮擋層移動(dòng)距離 * 大圖片最大移動(dòng)距離 / 遮擋層的最大移動(dòng)距離 var bigX = maskX * bigMaxX / maskMaxX; var bigY = maskY * bigMaxY / maskMaxY; //大圖和小圖(鼠標(biāo)移動(dòng))方向相反 bigImg.style.left = -bigX + 'px'; bigImg.style.top = -bigY + 'px'; }) })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS簡(jiǎn)單的圖片放大縮小的兩種方法
- js放大鏡放大圖片效果
- js實(shí)現(xiàn)單擊圖片放大圖片的方法
- js實(shí)現(xiàn)點(diǎn)擊圖片在屏幕中間彈出放大效果
- JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到縮略圖顯示大圖的圖片放大效果
- 鼠標(biāo)滑上去后圖片放大浮出效果的js代碼
- JavaScript圖片放大鏡效果代碼[代碼比較簡(jiǎn)單]
- js實(shí)現(xiàn)圖片放大展示效果
- 手機(jī)端 HTML5使用photoswipe.js仿微信朋友圈圖片放大效果
- JS網(wǎng)頁(yè)圖片查看器(兼容IE、FF)可控制圖片放大縮小移動(dòng)
相關(guān)文章
JavaScript使用focus()設(shè)置焦點(diǎn)失敗的解決方法
這篇文章主要介紹了JavaScript使用focus()設(shè)置焦點(diǎn)失敗的一個(gè)解決方法 ,需要的朋友可以參考下2014-09-09JS實(shí)現(xiàn)多張圖片預(yù)覽同步上傳功能
這篇文章主要介紹了JS實(shí)現(xiàn)多張圖片預(yù)覽同步上傳功能的相關(guān)資料,需要的朋友可以參考下2017-06-06使用JavaScript italics方法實(shí)現(xiàn)文本變斜體教程示例
這篇文章主要為大家介紹了JavaScript italics實(shí)現(xiàn)文本變斜體教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12微信小程序?qū)崿F(xiàn)根據(jù)字母選擇城市功能
這篇文章主要為大家詳細(xì)介紹了微信小程序中根據(jù)字母選擇城市的相關(guān)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08