jsシミュレーションでJingdongの詳細ページで画像を拡大する効果を実現

jsシミュレーションでJingdongの詳細ページで画像を拡大する効果を実現

この記事では、Jingdongの詳細ページの画像の拡大を実現するためのjsの具体的なコードを紹介します。具体的な内容は次のとおりです。

効果:

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 {
 位置: 相対的;
 高さ: 398ピクセル;
 境界線: 1px 実線 #ccc;
}
。マスク {
 表示: なし;
 位置: 絶対;
 幅: 300ピクセル;
 高さ: 300px;
 上: 0;
 左: 0;
 背景: #FEFE4F;
 不透明度: .5;
 境界線: 1px 実線 #ccc;
 カーソル: 移動;
}
。大きい {
 表示: なし;
 位置: 絶対;
 幅: 550ピクセル;
 高さ: 550px;
 上: 0;
 左: 410px;
 zインデックス: 999;
 境界線: 1px 実線 #ccc;
 オーバーフロー: 非表示;
}
.bigimg{
 位置: 絶対;
 左: 0;
 上: 0;
}

js (強調):

window.addEventListener('load',function(){
    var preview_img = document.querySelector('.preview_img');
    var マスク = this.document.querySelector('.mask');
    var big = this.document.querySelector('.big');
    var bigImg = this.document.querySelector('.bigImg');
    //マウスオーバー preview_img.addEventListener('mouseover',function(){
        mask.style.display = 'ブロック';
        big.style.display = 'ブロック';
    })
    //マウスアウト preview_img.addEventListener('mouseout',function(){
        マスクスタイル表示 = 'なし';
        big.style.display = 'なし';
    })
    //マウスが動くと preview_img.addEventListener('mousemove',function(e){
        //ボックス内のマウスの座標 var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // オクルージョン レイヤーが移動する距離 var maskX = x - mask.offsetWidth/2;
        var maskY = y -mask.offsetHeight/2;
        // 大きな画像の移動距離 // オクルージョン レイヤーの最大移動距離 var maskMaxX = preview_img.offsetWidth - mask.offsetWidth;
        var maskMaxY = preview_img.offsetHeight - mask.offsetHeight;
        //X座標が0未満の場合は0のままにします if (maskX <= 0) {
            マスクX = 0;
        }それ以外の場合 (maskX >= maskMaxX) {
            マスクX = マスクMaxX;
        }
        //Y座標が0未満の場合は0のままにします if (maskY <= 0) {
            マスクY = 0;
        }それ以外の場合 (maskY >= maskMaxY) {
            マスクY = マスクMaxY;
        }
        //オクルージョン レイヤーの移動 mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        
        // 大きな画像の最大移動距離 var bigMaxX = bigImg.offsetWidth - big.offsetWidth;
        var bigMaxY = bigImg.offsetHeight - big.offsetHeight;
        //大きな画像の移動距離XY
        // 大きな画像の移動距離 = オクルージョン レイヤーの移動距離 * 大きな画像の最大移動距離 / オクルージョン レイヤーの最大移動距離 var bigX = maskX * bigMaxX / maskMaxX;
        var bigY = maskY * bigMaxY / maskMaxY;
        // 大きな画像と小さな画像 (マウスの動き) は反対方向です。bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
})

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS で画像を拡大・縮小する 2 つの簡単な方法
  • js 虫眼鏡拡大画像効果
  • jsは画像をクリックして画像を拡大する方法を実装します
  • jsは画像をクリックすると画面の中央にポップアップして拡大する効果を実現します。
  • JSは、マウスをサムネイルに移動して大きな画像を表示するときに画像のズーム効果を実現します。
  • マウスを上にスライドさせた後の画像拡大とフローティング効果の js コード
  • JavaScript 画像拡大鏡効果コード [コードは比較的シンプルです]
  • 画像拡大表示効果を実現するjs
  • モバイル HTML5 は photoswipe.js を使用して WeChat Moments の写真のズーム効果を模倣します
  • JSウェブページ画像ビューア(IE、FFと互換性あり)は、画像の拡大・縮小や移動を制御できます。

<<:  ウェブデザインの仕事に応募する方法

>>:  CSS で順序付きリスト項目と順序なしリスト項目のスタイルを設定する方法

推薦する

vuex データの永続化のための 2 つの実装ソリューション

目次ビジネス要件:解決策 1: vuex-persistedstate解決策2: vuex-pers...

MySQL での重複キー更新時の replace into と insert into の使用法と相違点の分析

この記事では、MySQL での重複キー更新時の replace into と insert into...

MySQL マスタースレーブレプリケーション切断の一般的な修復方法

目次01 問題の説明02 ソリューション1. 他のスレーブライブラリを見つけてすぐに置き換える2. ...

Ubuntu 16.04にJenkinsをインストールするための詳細な手順

1. 前提条件JDKがインストールされましたecho $PATHソフトリンクを作成し、JDKのインス...

MySQL におけるデータタイムとタイムスタンプの違い

MySQL には 3 つの日付型があります。日付(年-月-日)テーブル test(hiredate ...

MySQL 8.0.17 winx64 (Navicat 付き) 手動構成バージョンのインストール チュートリアル図

1. ダウンロードアドレス: mysql-8.0.17-winx64ダウンロードして解凍する2. フ...

Javascript デザインパターン プロトタイプ モードの詳細

目次1. プロトタイプモード例1例2例3 2. オブザーバーパターン1. プロトタイプモードプロトタ...

el-tree での不完全なテキスト表示の解決策

目次方法1: 水平スクロールバーを設定する最も簡単な方法方法2(新規):ドラッグバーを追加して外側の...

MySQL の replace と replace into の詳細な例 into_Mysql

MySQL の replace と replace into はどちらも頻繁に使用される関数です。...

ウェブページ上の写真プレビューナビゲーションを設計するためのヒント

<br />ナビゲーションとは、ウェブサイトの上部にあることが多いナビゲーション バーの...

NodeとPythonの双方向通信実装コード

目次プロセスコミュニケーションプロセス間の双方向通信問題要約するサードパーティのデータ サプライヤー...

インターネットウェブデザインにおけるバイオニックデザインの簡単な紹介

バイオニックデザインといえば、飛行機の発明、ドバイのブルジュ・アル・アラブ、平泳ぎなどを思い浮かべる...

Bootstrap Webページレイアウトグリッドの実装

目次1. Bootstrapグリッドシステムの仕組み1.1 12グリッドシステム1.2 Bootst...

Linux/CentOS サーバー セキュリティ構成の一般ガイド

Linux はオープン システムです。インターネット上には、既成のプログラムやツールが多数存在します...

HTML ベースタグ target=_parent の使用の紹介

<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトのタ...