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

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

WBOY

リリース： 2016-06-24 11:15:44

オリジナル

1173 人が閲覧しました

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

レイアウトについて: 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="img/5-140526101943.jpg" />            <div id="mask"></div>        </div>        <div id="big">            <img src="img/5-140526101943.jpg" />        </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;

ログイン後にコピー

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

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