JS實(shí)現(xiàn)京東放大鏡效果
更新時(shí)間：2022年07月04日 15:49:11 作者：setTimeout()
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)京東放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)京東放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下
需要實(shí)現(xiàn)的效果圖如下：
①布局：布局采用一個(gè)大盒子里面首先分為上下兩個(gè)部分，然后下部分又分為左右兩個(gè)部分。左邊的盒子里面放了一個(gè)img和一個(gè)遮罩層cover，右邊盒子里面放的是800*800的大圖片，這里提供左邊的圖片b3.png和右邊的大圖片big.jpg:
注意：左邊盒子里面的cover采用絕對(duì)定位，右邊盒子里面的img采用絕對(duì)定位。
②功能實(shí)現(xiàn)：主要有三個(gè)功能模塊：
1.鼠標(biāo)經(jīng)過（mouseover）左邊盒子，黃色的遮罩層以及右邊盒子顯示，鼠標(biāo)離開（mouseout）則隱藏黃色遮罩層以及右邊盒子。
2.黃色遮罩層跟隨鼠標(biāo)移動(dòng)（mousemove）。鼠標(biāo)在盒子的坐標(biāo)=鼠標(biāo)在頁面的坐標(biāo)-左邊盒子在頁面的坐標(biāo)，但是又因?yàn)槭髽?biāo)是在遮罩層的中間，所以最終的坐標(biāo)要減去遮罩層一半的高度和寬度。注意這里有邊界條件：就是黃色遮罩層的移動(dòng)距離，黃色遮罩層的x方向的移動(dòng)距離不能小于0且不能大于左邊盒子寬度減去遮罩層的寬度。
3.移動(dòng)黃色遮罩層，大圖片跟隨移動(dòng)功能。大圖片移動(dòng)的距離根據(jù)下面這個(gè)公式來進(jìn)行計(jì)算：
遮擋層的移動(dòng)距離上一點(diǎn)已經(jīng)算過了，遮罩層的最大移動(dòng)距離上面也說了，剩下的就是大圖片最大移動(dòng)距離，大圖片最大移動(dòng)距離=圖片的大小-右邊盒子的大小。
最后全部代碼如下：
html代碼：
<!DOCTYPE html>
<html lang="en">
?
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>京東放大鏡效果</title>
? ? <script src="../js/index.js"></script>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ??
? ? ? ? ul li {
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? /* 外面大盒子 */
? ? ? ??
? ? ? ? .container {
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? ? ? width: 1200px;
? ? ? ? ? ? height: 500px;
? ? ? ? ? ? /* background-color: pink; */
? ? ? ? ? ? margin: 200px auto;
? ? ? ? }
? ? ? ??
? ? ? ? .container .topbox {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 60px;
? ? ? ? ? ? /* background-color: violet; */
? ? ? ? ? ? border-bottom: 2px solid #bc2815;
? ? ? ? }
? ? ? ??
? ? ? ? .container .topbox ul {
? ? ? ? ? ? margin-left: 10px;
? ? ? ? }
? ? ? ??
? ? ? ? .container .topbox ul li {
? ? ? ? ? ? float: left;
? ? ? ? ? ? font-size: 22px;
? ? ? ? ? ? color: #4e535b;
? ? ? ? ? ? padding: 15px 20px;
? ? ? ? }
? ? ? ??
? ? ? ? .container .topbox ul li:hover {
? ? ? ? ? ? color: white;
? ? ? ? ? ? background-color: #bc2815;
? ? ? ? }
? ? ? ??
? ? ? ? .container .topbox ul li:first-child {
? ? ? ? ? ? color: white;
? ? ? ? ? ? background-color: #bc2815;
? ? ? ? }
? ? ? ??
? ? ? ? .container .bottombox .leftbox {
? ? ? ? ? ? float: left;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? /* background-color: violet; */
? ? ? ? ? ? margin-top: 10px;
? ? ? ? }
? ? ? ??
? ? ? ? .container .bottombox .leftbox ul {
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? margin-left: 10px;
? ? ? ? }
? ? ? ??
? ? ? ? .container .bottombox .leftbox ul li {
? ? ? ? ? ? float: left;
? ? ? ? ? ? font-size: 14px;
? ? ? ? ? ? color: #4e535b;
? ? ? ? }
? ? ? ??
? ? ? ? .container .bottombox .leftbox .leftphone {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? /* background-color: pink; */
? ? ? ? ? ? margin-top: 5px;
? ? ? ? ? ? margin-left: 10px;
? ? ? ? ? ? border: 1px solid #c8cbc8;
? ? ? ? }
? ? ? ??
? ? ? ? .leftbox .leftphone img {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? }
? ? ? ??
? ? ? ? .container .bottombox .leftbox .leftphone .cover {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? display: none;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? width: 220px;
? ? ? ? ? ? height: 220px;
? ? ? ? ? ? background-color: #ffeba2;
? ? ? ? ? ? opacity: 0.5;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? cursor: move;
? ? ? ? }
? ? ? ??
? ? ? ? .container .bottombox .rightbox {
? ? ? ? ? ? float: left;
? ? ? ? ? ? margin-top: 10px;
? ? ? ? ? ? width: 420px;
? ? ? ? ? ? height: 420px;
? ? ? ? ? ? margin-left: 20px;
? ? ? ? ? ? /* background-color: violet; */
? ? ? ? }
? ? ? ??
? ? ? ? .container .bottombox .rightbox {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? display: none;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ??
? ? ? ? .container .bottombox .rightbox img {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? left: 0;
? ? ? ? }
? ? </style>
</head>
?
<body>
? ? <div class="container">
? ? ? ? <div class="topbox">
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li>全部商品分類</li>
? ? ? ? ? ? ? ? <li>服裝城</li>
? ? ? ? ? ? ? ? <li>美妝館</li>
? ? ? ? ? ? ? ? <li>傳智超市</li>
? ? ? ? ? ? ? ? <li>全球購</li>
? ? ? ? ? ? ? ? <li>閃購</li>
? ? ? ? ? ? ? ? <li>團(tuán)購</li>
? ? ? ? ? ? ? ? <li>拍賣</li>
? ? ? ? ? ? ? ? <li>有趣</li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? ? ? <div class="bottombox">
? ? ? ? ? ? <div class="leftbox">
? ? ? ? ? ? ? ? <div class="leftnav">
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li>手機(jī)、數(shù)碼、通訊 ></li>
? ? ? ? ? ? ? ? ? ? ? ? <li>手機(jī) ></li>
? ? ? ? ? ? ? ? ? ? ? ? <li>Apple蘋果 ></li>
? ? ? ? ? ? ? ? ? ? ? ? <li>iphone 6S Plus系統(tǒng) </li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? ? ? <div class="leftphone">
? ? ? ? ? ? ? ? ? ? ? ? <img src="../b3.png" alt="">
? ? ? ? ? ? ? ? ? ? ? ? <div class="cover"></div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="rightbox">
? ? ? ? ? ? ? ? <img src="../big.jpg" alt="" class="big">
? ? ? ? ? ? </div>
? ? ? ? </div>
?
? ? </div>
</body>
?
</html>外部js文件：
window.addEventListener('load', function() {
? ? // 獲取元素
? ? var cover = this.document.querySelector('.cover');
? ? var leftphone = this.document.querySelector('.leftphone');
? ? var rightbox = this.document.querySelector('.rightbox');
? ? var big = this.document.querySelector('.big');
? ? // 鼠標(biāo)移動(dòng)到左邊的手機(jī)上的時(shí)候遮罩層和右邊的手機(jī)顯示出來
? ? leftphone.addEventListener('mouseover', function() {
? ? ? ? cover.style.display = 'block'
? ? ? ? rightbox.style.display = 'block'
? ? })
? ? // 鼠標(biāo)移離開到左邊的手機(jī)上的時(shí)候遮罩層和右邊的手機(jī)隱藏?
? ? leftphone.addEventListener('mouseout', function() {
? ? ? ? cover.style.display = 'none'
? ? ? ? rightbox.style.display = 'none'
? ? })
? ? leftphone.addEventListener('mousemove', function(e) {
? ? ? ? var x = e.pageX - this.offsetLeft;
? ? ? ? var y = e.pageY - this.offsetTop;
? ? ? ? // x的移動(dòng)距離
? ? ? ? var totalx = x - cover.offsetWidth / 2;
? ? ? ? var totaly = y - cover.offsetHeight / 2
? ? ? ? if (totalx < 0) {
? ? ? ? ? ? totalx = 0;
? ? ? ? } else if (totalx >= leftphone.offsetWidth - cover.offsetWidth) {
? ? ? ? ? ? totalx = leftphone.offsetWidth - cover.offsetWidth;
? ? ? ? }
? ? ? ? if (totaly < 0) {
? ? ? ? ? ? totaly = 0;
? ? ? ? } else if (totaly >= leftphone.offsetHeight - cover.offsetHeight) {
? ? ? ? ? ? totaly = leftphone.offsetHeight - cover.offsetHeight;
? ? ? ? }
? ? ? ? cover.style.left = totalx + 'px';
? ? ? ? cover.style.top = totaly + 'px';
? ? ? ? // imgmaxx是圖片最大x移動(dòng)距離
? ? ? ? var imgmaxx = rightbox.offsetWidth - big.offsetWidth;
? ? ? ? var imgmaxy = rightbox.offsetHeight - big.offsetHeight;
? ? ? ? var imgmovex = totalx * imgmaxx / (leftphone.offsetWidth - cover.offsetWidth)
? ? ? ? var imgmovey = totaly * imgmaxy / (leftphone.offsetHeight - cover.offsetHeight)
? ? ? ? big.style.left = imgmovex + 'px';
? ? ? ? big.style.top = imgmovey + 'px';
?
? ? })
})以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于JS實(shí)現(xiàn)PHP的sprintf函數(shù)實(shí)例
這篇文章主要介紹了基于JS實(shí)現(xiàn)PHP的sprintf函數(shù)的方法,可實(shí)現(xiàn)JavaScript模擬PHPsprintf函數(shù)的輸出功能,涉及JavaScript字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-11-11
多種方式實(shí)現(xiàn)JS調(diào)用后臺(tái)方法進(jìn)行數(shù)據(jù)交互
幾種典型常用的方法如利用控件的AutopostBack屬性、Button提交表單等等，下面為大家分享下JS調(diào)用后臺(tái)方法進(jìn)行數(shù)據(jù)交互示例2013-08-08
BootStrap與validator 使用筆記(JAVA SpringMVC實(shí)現(xiàn))
這篇文章主要介紹了BootStrap與validator 使用筆記(JAVA SpringMVC實(shí)現(xiàn))的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了JavaScript Reduce使用的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下2021-03-03
這篇文章主要介紹了通過js來判斷iframe里的頁面是否加載完成,需要的朋友可以參考下2014-06-06
圖片翻轉(zhuǎn)效果具體實(shí)現(xiàn)代碼
想必大家對(duì)圖片翻轉(zhuǎn)效果都有所了解吧，其實(shí)很容易實(shí)現(xiàn)的，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下2014-01-01
JavaScript中11種常用的hook鉤子技術(shù)及示例代碼
我們前端的JavaScript中,經(jīng)常提到鉤子,Hook技術(shù)又叫鉤子技術(shù),指在程序運(yùn)行過程中,對(duì)其中某個(gè)方法進(jìn)行重寫,在原先某個(gè)方法前后加入我們自定義的代碼,我們的鉤子,鉤子機(jī)制,鉤子函數(shù),hook,都是同一個(gè)概念,本文講述了11種常用的hook技術(shù)及示例代碼2024-12-12
js中位數(shù)不足自動(dòng)補(bǔ)位擴(kuò)展padLeft、padRight實(shí)現(xiàn)代碼
這篇文章主要介紹了js中位數(shù)不足自動(dòng)補(bǔ)位擴(kuò)展之padLeft、padRight實(shí)現(xiàn)方法，主要是通過String.prototype擴(kuò)展實(shí)現(xiàn),需要的朋友可以參考下2020-04-04
這篇文章主要給大家介紹了關(guān)于js中arguments對(duì)象的深入理解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
微信小程序?qū)崿F(xiàn)動(dòng)態(tài)設(shè)置頁面標(biāo)題的方法【附源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)設(shè)置頁面標(biāo)題的方法,涉及微信小程序button組件事件綁定及頁面元素屬性動(dòng)態(tài)設(shè)置相關(guān)實(shí)現(xiàn)技巧,并附帶完整源碼供讀者下載參考,需要的朋友可以參考下2017-11-11