画像拡大鏡の詳しい説明 annotation_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

画像拡大鏡の詳しい説明 annotation_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:15 AM

今日の練習は、オンラインショッピングサイトでよくある、画像の詳細を紹介する虫眼鏡エフェクトを作成することです。簡単に言うと、拡大された効果を確認できるように、画像内に対応する領域があります。

レイアウトについて: 2 つの div セットで、最初の大きな div セットには画像が含まれ、小さな div はカバーレイヤーです。 2 番目のグループは、大きな画像 div 表示ボックスです。このボックスでは、画像が拡大され、余分な部分が隠されています。窓から外を見ていると想像できます。見えているのはその一部にすぎません。

思考: それは両側の比率、重要なポイント、比率です。何も言わずに、ただコードに進みましょう。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            *{margin:0 ; padding:0;}            #left{width:300px;                    height:300px;                    border:1px solid gold;                    position:relative;                    float:left;                    margin-right:20px;                    left:10px;                    top:10px;}            #left img{width:300px;                        height:300px;}            #mask{width:90px;                    height:90px;                    background:greenyellow;                    opacity: 0.5;                    position: absolute;                    top:0;                    left:0;                    display:none;                    cursor: move;}            #big{width:600px;                    height:600px;                    overflow: hidden;                    float: left;                    position:relative;                    left: 10px;                    top:10px;                    display:none;                    border:1px solid goldenrod;}            #big img{position: absolute;                    left:0;                    top:0;}                    </style>    </head>    <body>        <div id="left">            <img  src="/static/imghwm/default1.png"  data-src="img/5-140526101943.jpg"  class="lazy" / alt="画像拡大鏡の詳しい説明 annotation_html/css_WEB-ITnose" >            <div id="mask"></div>        </div>        <div id="big">            <img  src="/static/imghwm/default1.png"  data-src="img/5-140526101943.jpg"  class="lazy" / alt="画像拡大鏡の詳しい説明 annotation_html/css_WEB-ITnose" >        </div>        <script>                 // 左边遮罩层与左边显示框大小的比例对应大图显示区与图片的比例                     window.onload = function(){                var left = document.getElementById("left");                var mask = document.getElementById("mask");                var big = document.getElementById("big");                var bigImg = big.children[0];                                //鼠标移入，遮罩层显示，大图显示区显示                left.onmouseenter = function(){                    mask.style.display = big.style.display ='block';                };                //鼠标移出，遮罩层隐藏，大图显示区隐藏                left.onmouseleave = function(){                    mask.style.display= big.style.display = 'none';                };                                //鼠标移动，遮罩层跟随鼠标，大图显示相关内容                left.onmousemove = function(ev){                    //兼容IE                    var ev = ev || event;

//マウスはマスクレイヤーの中央に表示されます。マウスの位置 - 表示領域から本体までの距離 - マスクレイヤーの半分 // 以下はマスクに割り当てられた距離です。レイヤーなのでマイナスを使用し、マウスの位置を変更します。マスクレイヤーを戻すには減算を使用する必要があります

これが完成したエフェクトです。画像ファイルを挿入する方法がわかりません。自分で写真を撮ってアドレスを変更するのは問題ありません。マスクレイヤーと表示領域の画像が異なる場合は、サイズを変更するだけで済みます。マスクレイヤーの。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLドキュメントのルートタグは何ですか？Apr 29, 2025 am 12:10 AM

Theroottaginanhtmldocumentis.itservesStop-levellementThateChationCothercontent、ProperDocumentsTurcuteRuctureAndBrowsingを保証します。

HTMLタグと要素は同じものですか？Apr 28, 2025 pm 05:44 PM

この記事では、HTMLタグは要素を定義するために使用される構文マーカーであり、要素はタグやコンテンツを含む完全なユニットであると説明しています。彼らは協力してWebPages.Characterカウントを構築するために協力します：159

＆lt; head＆gt;の重要性は何ですかおよび＆lt; body＆gt; HTMLのタグ？Apr 28, 2025 pm 05:43 PM

この記事では、＆lt; head＆gt;の役割について説明します。および＆lt; body＆gt; HTMLのタグ、ユーザーエクスペリエンスへの影響、およびSEOの影響。適切な構造化により、ウェブサイトの機能と検索エンジンの最適化が強化されます。

＆lt; strong＆gt;＆lt; b＆gt;の違いは何ですかタグと＆lt; em＆gt;＆lt; i＆gt;タグ？Apr 28, 2025 pm 05:42 PM

この記事では、HTMLタグの違いについて説明します。、、、、、、、およびプレゼンテーションの使用とSEOとアクセシビリティへの影響に焦点を当てています。

HTMLのドキュメントで使用されている文字セットを示す方法を説明してください。Apr 28, 2025 pm 05:41 PM

記事では、UTF-8に焦点を当てたHTMLでのキャラクターエンコーディングの指定について説明します。主な問題：テキストの正しい表示を確保し、文字化けされたキャラクターの防止、SEOとアクセシビリティの強化。

HTMLのさまざまなフォーマットタグは何ですか？Apr 28, 2025 pm 05:39 PM

この記事では、Webコンテンツの構築とスタイリングに使用されるさまざまなHTMLフォーマットタグについて説明し、テキストの外観に対する影響とアクセシビリティとSEOのセマンティックタグの重要性を強調しています。

「ID」属性とHTML要素の「クラス」属性の違いは何ですか？Apr 28, 2025 pm 05:39 PM

この記事では、HTMLの「ID」属性と「クラス」属性の違いについて説明し、一意性、目的、CSS構文、および特異性に焦点を当てています。それらがWebページのスタイリングと機能にどのように影響するかを説明し、のベストプラクティスを提供する

HTMLの「クラス」属性とは何ですか？Apr 28, 2025 pm 05:37 PM

この記事では、スタイリングとJavaScriptの操作の要素をグループ化するHTML「クラス」属性の役割を説明し、一意の「ID」属性とは対照的です。

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。