欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實現(xiàn)京東放大鏡效果

 更新時間:2022年07月04日 15:49:11   作者:setTimeout()  
這篇文章主要為大家詳細介紹了JS實現(xiàn)京東放大鏡效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)京東放大鏡效果的具體代碼,供大家參考,具體內(nèi)容如下

需要實現(xiàn)的效果圖如下:

①布局:布局采用一個大盒子里面首先分為上下兩個部分,然后下部分又分為左右兩個部分。左邊的盒子里面放了一個img和一個遮罩層cover,右邊盒子里面放的是800*800的大圖片,這里提供左邊的圖片b3.png和右邊的大圖片big.jpg:

注意:左邊盒子里面的cover采用絕對定位,右邊盒子里面的img采用絕對定位。

②功能實現(xiàn):主要有三個功能模塊:

1.鼠標經(jīng)過(mouseover)左邊盒子,黃色的遮罩層以及右邊盒子顯示,鼠標離開(mouseout)則隱藏黃色遮罩層以及右邊盒子。

2.黃色遮罩層跟隨鼠標移動(mousemove)。鼠標在盒子的坐標=鼠標在頁面的坐標-左邊盒子在頁面的坐標,但是又因為鼠標是在遮罩層的中間,所以最終的坐標要減去遮罩層一半的高度和寬度。注意這里有邊界條件:就是黃色遮罩層的移動距離,黃色遮罩層的x方向的移動距離不能小于0且不能大于左邊盒子寬度減去遮罩層的寬度。

3.移動黃色遮罩層,大圖片跟隨移動功能。大圖片移動的距離根據(jù)下面這個公式來進行計算:

遮擋層的移動距離上一點已經(jī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>團購</li>
? ? ? ? ? ? ? ? <li>拍賣</li>
? ? ? ? ? ? ? ? <li>有趣</li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? ? ? <div class="bottombox">
? ? ? ? ? ? <div class="leftbox">
? ? ? ? ? ? ? ? <div class="leftnav">
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li>手機、數(shù)碼、通訊&nbsp;&nbsp;></li>
? ? ? ? ? ? ? ? ? ? ? ? <li>手機&nbsp;&nbsp;></li>
? ? ? ? ? ? ? ? ? ? ? ? <li>Apple蘋果&nbsp;&nbsp;></li>
? ? ? ? ? ? ? ? ? ? ? ? <li>iphone 6S Plus系統(tǒng)&nbsp;&nbsp;</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');
? ? // 鼠標移動到左邊的手機上的時候遮罩層和右邊的手機顯示出來
? ? leftphone.addEventListener('mouseover', function() {
? ? ? ? cover.style.display = 'block'
? ? ? ? rightbox.style.display = 'block'
? ? })
? ? // 鼠標移離開到左邊的手機上的時候遮罩層和右邊的手機隱藏?
? ? 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的移動距離
? ? ? ? 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移動距離
? ? ? ? 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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • Bootstrap框架動態(tài)生成Web頁面文章內(nèi)目錄的方法

    Bootstrap框架動態(tài)生成Web頁面文章內(nèi)目錄的方法

    這篇文章主要介紹了Bootstrap框架動態(tài)生成Web頁面文章內(nèi)目錄的方法,利用Bootstrap中的Affix和ScrollSpy插件便可以實現(xiàn),需要的朋友可以參考下
    2016-05-05
  • javaScript使用EL表達式的幾種方式

    javaScript使用EL表達式的幾種方式

    這篇文章主要介紹了javaScript如何使用EL表達式,有哪幾種不錯的方式,需要的朋友可以參考下
    2014-05-05
  • 淺談PDF.js使用心得

    淺談PDF.js使用心得

    本篇文章主要介紹了淺談PDF.js使用心得,pdf.js 是一個技術原型主要用于在 HTML5 平臺上展示 PDF 文檔,無需任何本地技術支持。非常具有實用價值,需要的朋友可以參考下
    2018-06-06
  • JavaScript格式化數(shù)字的函數(shù)代碼

    JavaScript格式化數(shù)字的函數(shù)代碼

    當要格式化的數(shù)字為null、空或非數(shù)字時,返回的結果。默認為0
    2010-11-11
  • js自定義QQ菜單效果

    js自定義QQ菜單效果

    這篇文章主要為大家詳細介紹了js自定義QQ菜單,具有收縮,下拉等功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • javascript對下拉列表框(select)的操作實例講解

    javascript對下拉列表框(select)的操作實例講解

    這篇文章主要介紹了javascript對下拉列表框(select)的操作。需要的朋友可以過來參考下,希望對大家有所幫助
    2013-11-11
  • JavaScript 下載svg圖片為png格式

    JavaScript 下載svg圖片為png格式

    這篇文章主要介紹了JavaScript 下載svg圖片為png格式,本文通過代碼給大家講解的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-06-06
  • javascript的trim,ltrim,rtrim自定義函數(shù)

    javascript的trim,ltrim,rtrim自定義函數(shù)

    今天用到javascript去掉一個文本框中字符串兩端的空格,開始還以為有trim,ltrim,rtrim函數(shù)(asp中有這三個函數(shù),弄混了),結果找半天,沒有找到。最后找到用正則實現(xiàn)這樣功能的自定義函數(shù)。
    2008-09-09
  • js獲取時間函數(shù)及擴展函數(shù)的方法

    js獲取時間函數(shù)及擴展函數(shù)的方法

    下面小編就為大家?guī)硪黄猨s獲取時間函數(shù)及擴展函數(shù)的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10
  • 通過隱藏iframe實現(xiàn)文件下載的js方法介紹

    通過隱藏iframe實現(xiàn)文件下載的js方法介紹

    本篇文章主要是對通過隱藏iframe實現(xiàn)文件下載的js方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-02-02

最新評論