JD製品の詳細に虫眼鏡効果を作成する方法
Jingdong虫眼鏡効果
JavaScriptでのDOM操作
の主な知識ポイントを理解します。
JavaScriptにおける時間の取得には、主に写真上でマウスが移動した際のmouseenter、mouseleave、onmousemoveイベントと、イベントオブジェクトの属性clientY、clientX、要素幅のoffsetWidth、offsetHightの取得が含まれます。 、など。
絶対的な位置決めと倍率の計算を考慮するのが最善です。そこで使用される倍率式（小枠内の倍率領域の面積/小枠の面積）= (大きなフレームの領域/大きなバスケット内の領域) 写真の領域) //大きな写真の原則は、大きなフレームに配置し、大きなフレームの CSS スタイルを設定することですオーバーフローするフレーム: 小さなバスケット内の領域を大きなフレームに比例して表示できるように、非表示にします。
具体的なコードの実装は次のとおりです
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css">
*{ margin: 0; padding: 0; }
#small{ float: left; width:450px; height:450px; border: 1px solid black; margin-left: 100px; position:absolute; }
#big{ float: left; width:600px; height:600px; overflow: hidden; border: 1px solid black; position: absolute; left:600px; top: 0px; }
#magnifying{ width: 200px; height:200px; background-color: cornflowerblue; opacity: 0.4; left: 0px; top: 0px; position: absolute; }
#bigImg{ position: absolute; width: 1350px; height:1350px; }
</style>
</head>
<body>
<p id="small">
<img src="/static/imghw/default1.png" data-src="img/1.png" class="lazy" / alt="JD製品の詳細に虫眼鏡効果を作成する方法" >//记得将其设置与小框大小一致 <p id="magnifying"></p>
</p>
<p id="big">
<img src="/static/imghw/default1.png" data-src="img/2.jpg" class="lazy" id="bigImg" / alt="JD製品の詳細に虫眼鏡効果を作成する方法" >
</p>
<script type="text/javascript">
var small=document.getElementById("small"); var magnifying=document.getElementById("magnifying"); var big=document.getElementById("big"); var bigImg=document.getElementById("bigImg");
small.onmouseenter=function(){
magnifying.style.display="block";
bigImg.style.display="block"
}
small.onmouseleave=function(){
magnifying.style.display="none";
bigImg.style.display="none";
}
small.onmousemove=function(event){
var left=event.clientX-small.offsetLeft-magnifying.offsetWidth/2; var top=event.clientY-small.offsetTop-magnifying.offsetHeight/2; var leftMax=small.offsetWidth-magnifying.offsetWidth; var topMax=small.offsetHeight-magnifying.offsetHeight; //限制鼠标移动的区域
left = left<=0 ? 0 : left;
top = top <=0? 0:top; //限制右边界与下边界
left =left>=leftMax?leftMax:left;
top =top>=topMax?topMax:top;
magnifying.style.left=left+"px";
magnifying.style.top=top+"px"; //核心代码
var imgLef=-left/leftMax *(bigImg.offsetWidth-big.offsetWidth); var imgTop=-top/topMax * (bigImg.offsetHeight-big.offsetHeight);
bigImg.style.left=imgLef+"px";
bigImg.style.top=imgTop+"px";
} </script>
</body></html>この方法で拡大効果を実現できます。これが皆さんのお役に立てば幸いです。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
フロントエンドでモジュール性を使用する必要があるのはなぜですか?
ブラウザの互換性問題に対する Web フロントエンド ソリューション
以上がJD製品の詳細に虫眼鏡効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7702
15
1640
14
1393
52
1287
25
1230
29
「JD.com」+メンバーシップの特典は何ですか?
Feb 27, 2024 am 08:10 AM
JD Plus会員には、無料お試し、限定割引、送料無料など、多数の優待特典がございます。より安心してお買い物ができるよう、JD Plus会員の具体的なメリットを詳しくご紹介します。 JD Plus 会員になるメリットは何ですか? 1. 年間最低価格: 会員は最低価格を享受でき、商品を購入する際にさらに割引を受けることができます。 2. 無料でご利用いただけます: 一部の無料お試し製品が会員に配布され、さまざまな製品をお試しいただけます。 3.配送優先度：通常のユーザーよりも配送速度が速く、より早く商品を受け取ることができます。 4. 専用のカスタマーサービス: ユーザーの質問に質問がある場合、すぐに回答できる専用のカスタマーサービスを提供できます。
JBLヘッドフォンの信頼性を確認する方法
Dec 29, 2023 pm 10:54 PM
JBL ヘッドフォンは多くの音楽鑑賞ユーザーにとって最初の選択肢であり、絶賛されていますが、誰もが依然として偽物を非常に恐れています。以下でクエリの方法を見てみましょう。 jbl ヘッドフォンの信頼性を確認する方法: 1. まず、「中国製品情報検証センター」に入ります。 2. 次に、クエリコードを入力して、それが正しいかどうかを確認し、本物かどうかを判断します。 3. ヘッドフォンからの音の明瞭さによっても区別できます。純正ヘッドホンの音は非常にクリアで音質も変わりません。偽造ヘッドフォンのサウンドには多くの異物が含まれており、音質も非常に悪いです。 4. ヘッドフォンのサウンドを最大まで上げて、調和しているかどうかを確認してください。実際のヘッドフォンのサウンドは同じです。でも偽のヘッドフォンの音は鳴ってる
Bluetooth 5.3 には携帯電話のサポートが必要ですか?詳細はこちらをご覧ください
Jan 14, 2024 pm 04:57 PM
携帯電話を購入するとき、携帯電話のパラメータに Bluetooth サポート オプションがあることがわかります。購入した Bluetooth ヘッドセットが携帯電話と一致しない状況に遭遇することがあります。したがって、Bluetooth 5.3 をサポートする必要がありますか?携帯電話? 実際には必要ありません。 Bluetooth 5.3 には携帯電話のサポートが必要ですか? 回答: Bluetooth 5.3 には携帯電話のサポートが必要です。ただし、Bluetooth をサポートする携帯電話であれば使用できます。 1. Bluetooth には下位互換性がありますが、対応するバージョンを使用するには携帯電話のサポートが必要です。 2. たとえば、Bluetooth 5.3 を使用するワイヤレス Bluetooth ヘッドセットを購入するとします。 3. 携帯電話が Bluetooth 5.0 のみをサポートしている場合は、接続時に Bluetooth 5.0 が使用されます 4. したがって、この携帯電話を使用してヘッドフォンを接続して音楽を聴くことはできますが、速度は Bluetooth ほど良くありません。
サイバーパンク 2077 に関するよくある質問の分析
Jan 05, 2024 pm 06:05 PM
最近、超人気ゲーム「サイバーパンク 2077」がオンラインで公開されました。多くのユーザーが急いでダウンロードして体験しています。しかし、その過程ではまだ多くの問題があります。今日は、サイバーパンク 2077 のプレイに関するよくある質問をいくつか紹介します。何か欲しいことがあれば。サイバーパンク 2077 のプレイに関するよくある質問: 1. 価格の詳細: 1. Steam ゲーム プラットフォームでの購入価格は: 298 元です。 2. 壮大なゲーム プラットフォームの購入価格は、43 米ドル = 282 元です。 3. ps4ゲーム端末の購入価格は400元+香港ドル、箱入りは380元+人民元です。 4. ロシア地域でのロシアの購入価格は 172 元です。 2. 構成の詳細: 1. 最小構成 (1080P): GT
「京東」でBaitiaoを閉じる方法
Feb 27, 2024 am 09:22 AM
次の手順で JD Baitiao を閉じることができます: 1. JD APP を開きます; 2. 「マイ」ページをクリックします; 3. 「JD Baitiao」を選択します; 4. 「返済」をクリックします; 5. 「Baitiao を閉じる」を選択します; 6. . 操作を完了するためのプロンプトに従ってください。このようにして、Jingdong Baitiao を簡単に閉じることができます。 Jingdong Baitiao を閉じる方法 1. まず、Jingdong を開き、右下隅にある [My] をクリックして、図に示すように Baitiao をクリックします。 2. 図に示すように、右下隅にある [My] をクリックしましょう。 3. 次に、図に示すように、[詳細設定] をクリックします。 4. [詳細設定] で [その他] をクリックします。 5. 次に、下部にあるログアウトの白いバーをクリックします。 6. 最後に、理由を選択し、「続行」をクリックしてログアウトし、Jingdong Baitiao を閉じます。
JD.comは「ドアツードアの無料返品交換」貨物保険サービスをさらにアップグレードし、8月末までに本格的に開始する予定です
Aug 14, 2024 am 10:09 AM
本ウェブサイトは8月13日、消費者のショッピング体験を向上させ、加盟店により便利で効率的なアフターサービス注文管理ツールを提供するため、京東が4月に「宅配無料返品・交換」サービスを開始したと報じた。今年。当サイト上の注意：「宅配無料返品交換」サービスとは、加盟店が「運送保険（バージョンアップ版）」に加入した上で「宅配無料返品交換」サービスを開始することをいいます。 , 消費者がフロントデスクに「宅配無料返品交換」のロゴを表示して商品の返品または交換を開始すると、保険会社は商品の片道送料に対して保険サービスを提供します。返品と交換。運送保険（売主の運送保険および買主の運送保険を含む）が満たされている場合、配達担当者は荷物の引き取り時に顧客に運賃を請求せず、また、販売者が荷物の引き取り後に運賃を請求することもありません。代わりに保険会社が行います。北京配達に直接補償金を支払います。詳細ページには、送料が 0 であることが表示されます。今
京東エクスプレスお問い合わせポータル
Feb 23, 2024 pm 03:43 PM
京東速達問い合わせポータルでは、ウェブサイトを通じて現在の速達状況を簡単に確認し、対応する情報を知ることができます。 [https://www.jdl.com/orderSearch/?waybillCodes=] を通じてクエリできます。エクスプレス クエリ ポータル Web サイトの URL の紹介では、その操作方法を説明します。以下に詳細な紹介を記載します。ぜひご覧ください。 JD Express 問い合わせ入口 回答: [https://www.jdl.com/orderSearch/?waybillCodes=] 詳細: 1. ウェブサイト [https://www.jdl.com/orderSearch] にアクセスします。
京東の返金のみの操作方法
Feb 24, 2024 am 11:49 AM
京東は返金のみを行うにはどうすればよいですか? 京東は購入した商品を返金のみに設定できますが、ほとんどの友人は京東の返金のみの操作方法を知りません。次に、エディターがユーザーに提供する京東の返金のみの方法です。グラフィックチュートリアルがあります。興味のある方はぜひご覧ください。京東の使い方チュートリアル 京東のみ返金の操作方法 1. まず京東APPを開き、メインインターフェースの右下隅にある[私の]エリアに入ります; 2. 次に、私のエリアの[私の注文]機能を選択します; 3.最後に、「返金注文の場合」のみを選択し、[返金申請]をクリックして操作は完了です。
