JS實(shí)現(xiàn)京東放大鏡效果
本文實(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'; ? ? ? }) })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap框架動(dòng)態(tài)生成Web頁面文章內(nèi)目錄的方法
這篇文章主要介紹了Bootstrap框架動(dòng)態(tài)生成Web頁面文章內(nèi)目錄的方法,利用Bootstrap中的Affix和ScrollSpy插件便可以實(shí)現(xiàn),需要的朋友可以參考下2016-05-05JavaScript格式化數(shù)字的函數(shù)代碼
當(dāng)要格式化的數(shù)字為null、空或非數(shù)字時(shí),返回的結(jié)果。默認(rèn)為02010-11-11javascript對(duì)下拉列表框(select)的操作實(shí)例講解
這篇文章主要介紹了javascript對(duì)下拉列表框(select)的操作。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11javascript的trim,ltrim,rtrim自定義函數(shù)
今天用到j(luò)avascript去掉一個(gè)文本框中字符串兩端的空格,開始還以為有trim,ltrim,rtrim函數(shù)(asp中有這三個(gè)函數(shù),弄混了),結(jié)果找半天,沒有找到。最后找到用正則實(shí)現(xiàn)這樣功能的自定義函數(shù)。2008-09-09js獲取時(shí)間函數(shù)及擴(kuò)展函數(shù)的方法
下面小編就為大家?guī)硪黄猨s獲取時(shí)間函數(shù)及擴(kuò)展函數(shù)的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10通過隱藏iframe實(shí)現(xiàn)文件下載的js方法介紹
本篇文章主要是對(duì)通過隱藏iframe實(shí)現(xiàn)文件下載的js方法進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02