この記事では、画像拡大鏡効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 <!DOCTYPE html> <html> <head lang="ja"> <メタ文字セット="UTF-8"> <タイトル></タイトル> <スタイル> *{ パディング:0; マージン:0; } 。箱{ 位置: 相対的; 幅:350ピクセル; 高さ:510px; マージン:自動; } 。真ん中 { 位置: 相対的; 境界線: 1px ピンク オーバーフロー: 非表示; } .hover_ceng{ 位置: 絶対; zインデックス: 1; 背景: url(./img/bg.png); 背景サイズ: 4px 4px; 表示: なし; } .middle >画像{ 幅:100%; 高さ:100%; } 。小さい{ 位置: 相対的; 幅:350ピクセル; 高さ:110ピクセル; テキスト配置: 中央; } .small>span{ 位置: 絶対; 表示:ブロック; 上:15px; 行の高さ: 50px; フォントサイズ: 20px; 幅:20px; 高さ:50px; 背景: #eabcb8; } .small .leftbtn { 左: 0; } .small .rightbtn { 右: 0; } .small>.list>ul>li{ リストスタイル:なし; フロート:左; 幅:250px; } 。リスト{ 幅:250px; 表示:インラインブロック; テキスト配置: 左; オーバーフロー: 非表示; } .list_ul{ 幅:500ピクセル; オーバーフロー: 非表示; 高さ:自動; 遷移: すべて 0.5 秒線形; } .small-li{ 表示: インラインブロック; 幅:54px; 高さ:58px; マージン:10px 0; border:2px 実線 透明; } .small-li>画像{ 幅:100%; 高さ:100%; } 。大きい{ 位置: 絶対; トップ:0; 左:350px; 高さ:400px; 幅:350ピクセル; border:1px 実線 ゲインズボロ; 背景画像: url(./img/big8.jpg); /*背景サイズ: 350px 400px;*/ 表示: なし; /*背景繰り返し: 繰り返しなし;*/ } </スタイル> </head> <本文> <div class="box"> <div class="middle" style="width:350px;height:400px;"> <div class="hover_ceng" style=" 幅:153.508px;高さ:200px;"></div> <img id="middleimg" src="./img/middle.5.jpg" alt=""/> </div> <div class="small"> <span class="leftbtn"><</span> <div class="list"> <ul class="list_ul"> <li> <div class="small-li" data-middle="middle.5.jpg" data-big="big5.jpg"> <img src="./img/small5.jpg" alt=""/> </div> <div class="small-li" data-middle="middle.6.jpg" data-big="big6.jpg"> <img src="./img/small6.jpg" alt=""/> </div> <div class="small-li" data-middle="middle.7.jpg" data-big="big7.jpg"> <img src="./img/small7.jpg" alt=""/> </div> <div class="small-li" data-middle="middle.8.jpg" data-big="big8.jpg"> <img src="./img/small8.jpg" alt=""/> </div> </li> <li> <div class="small-li" data-middle="middle.1.jpg" data-big="big1.jpg"> <img src="./img/small1.jpg" alt=""/> </div> <div class="small-li" data-middle="middle.2.jpg" data-big="big2.jpg"> <img src="./img/small2.jpg" alt=""/> </div> <div class="small-li" data-middle="middle.3.jpg" data-big="big3.jpg"> <img src="./img/small3.jpg" alt=""/> </div> <div class="small-li" data-middle="middle.4.jpg" data-big="big4.jpg"> <img src="./img/small4.jpg" alt=""/> </div> </li> </ul> </div> <span class="rightbtn">> </span> </div> <div class="big"> <!--<img src="./img/big6.jpg" alt=""/>--> </div> </div> <スクリプト> var smallblack=document.getElementsByClassName("small-li"); var 中間画像 = document.getElementById("中間画像"); var middleblock=document.getElementsByClassName("middle")[0]; var ceng = document.getElementsByClassName("hover_ceng")[0]; var box_b = document.getElementsByClassName("box")[0]; var bigbang=document.getElementsByClassName("big")[0]; var leftbutton = document.getElementsByClassName("leftbtn")[0]; var 右ボタン = document.getElementsByClassName("rightbtn")[0]; var listmeun=document.getElementsByClassName("list_ul")[0]; var before = null; (var i =0;i<smallblack.length;i++){ smallblack[i].onmouseenter=関数(){ if(befortu)befortu.style.borderColor="透明"; this.style.borderColor="ピンク"; 前に =これ; //中央の画像が表示されます middleimage.src="./img/" + this.getAttribute("data-middle"); //全体像を取得します bigbang.style.backgroundImage="url(./img/"+this.getAttribute('data-big')+")"; } } //マウス入力イベント変数を追加 middleblock.onmouseenter=関数(){ this.style.cursor = "移動"; ceng.style.display = "ブロック"; bigbang.style.display = "ブロック"; } middleblock.onmouseleave=関数(){ ceng.style.display="なし"; bigbang.style.display = "なし"; } middleblock.onmousemove = function(m) { var pageX = m.pageX || m.clientX; var pageY = m.pageY || m.clientY; //現在の要素のオフセットを取得します offsetLeft 左オフセット offsetTop 上オフセット this.offsetHeight, this.offsetWidth pageX = pageX -(box_b.offsetLeft+parseInt (ceng.style.width)/2); pageY = pageY -(box_b.offsetTop+parseInt (ceng.style.height)/2); var bigleft = parseInt (this.style.width) - parseInt (ceng.style.width); var bigtop = parseInt (this.style.height) - parseInt (ceng.style.height); pageX = pageX <=0 ? 0:(pageX >=bigleft ? bigleft :pageX ); pageY = pageY <=0 ? 0:(pageY >=bigtop ? bigtop :pageY ); ceng.style.left= pageX + "px"; ceng.style.top= ページY + "px"; //マウスを動かすと、大きな画像もそれに応じて動きます bigbang.style.backgroundPosition = (-pageX * 2.28) + "px " + (-pageY * 2) + "px "; } 左ボタン.onclick = 関数(){ listmeun.style.marginLeft =0+"px"; } 右ボタンのonclick = 関数(){ listmeun.style.marginLeft =-250+"px"; } </スクリプト> </本文> </html> 最大の画像は元のウェブサイトからダウンロードできなかったため、拡大すると効果が気になる可能性があり、画像を拡大縮小する方法を学ぶ必要があります。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLのカバーインデックスに関する知識ポイントのまとめ
方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...
需要背景プロジェクトはVueを使用して作成され、ビジネス要件にはパズル効果があります。デフォルトの背...
目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...
目次FTP、FTPS、SFTP の概要FTP FTPS FTPサーバーFTPソフトウェアのアクティブ...
目次文字セット比較ルール4つのレベルの文字セットと比較規則3つのシステム変数このノートは主にMySQ...
目次1. カーソルとは何ですか? 2. カーソルの使い方1. カーソルを宣言する2.カーソルを開く3...
目次ライフサイクルの変化反応的な参照vue2.x では ref を使用して要素タグを取得します。vu...
アイデア: 最初にランダムに並べ替えてからグループ化します。 1. テーブルを作成します。 テーブル...
目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...
クローラーの開発プロセス中に、クローラーを複数のサーバーに展開する必要がある状況に遭遇したことがある...
目次1. インデックスの基本1. インデックスの種類1.1 Bツリーインデックス1.2 ハッシュイン...
1: 速度と読み込み方法の違いdivとtableの違いは速度ではなく、読み込み方法です。速度はネット...
Nginx におけるいわゆる接続制限は、実際には TCP 接続、つまり 3 ウェイ ハンドシェイク後...
この記事では、例を使用して MySQL 正規表現 (regexp および rlike) の検索機能を...
MySQL には、msi インストールと zip 解凍の 2 つのインストール方法があります。 zi...