JavaScript は虫眼鏡の効果を実装します (コード例)

不言
リリース: 2019-01-18 10:41:24
転載
2996 人が閲覧しました

この記事の内容は、JavaScript での虫眼鏡効果の実現に関するものです (コード例)。必要な方は参考にしていただければ幸いです。

実装原理: 画像と小さい画像をそれぞれ拡大する 2 つの div を使用します。小さい画像にはマスク レイヤが存在する必要があります。マスク レイヤーを配置して、大きな画像の相対的な位置を決定します。マスク レイヤーの移動は、大きな画像の移動とは逆方向にする必要があります。

Key: サイズ大きい画像と小さい画像の比率 マスクレイヤーのサイズと拡大表示領域の比率と同じである必要があります;

難易度: 表示するマスクレイヤーを計算します対応する大き​​な画像の位置

さっそくコードを見てみましょう

code

html:

<div id="small">
    <div id="pic1">
        <img src="62-130501163925.jpg" alt="">
    </div>
    <div id="mask"></div>
</div>
<div id="big">
    <div id="pic2">
        <img src="62-130501163925.jpg" alt="">
    </div>
</div>
ログイン後にコピー

css

#small{
    width: 500px;
    height: 312px;
    position: absolute;
    left: 20px;
    top: 20px;
}
#pic1{
    position: absolute;
    left: 0px;
    top: 0px;
}
#pic1 img{
    width: 100%;
    height: 100%;
}
#big{
    width: 200px;
    height: 200px;
    position: absolute;
    right: 50px;
    top: 50px;
    border: 1px solid blue;
    overflow: hidden;
}
#pic2{
    width: 1000px;
    height: 625px;
    position: absolute;
    left: 0;
    top: 0;
}
#pic2 img{
    width: 100%;
    height: 100%;
}
#mask{
    width: 100px;
    height: 100px;
    background: black;
    opacity: 0.3;/*让遮罩层看起来透明*/
    filter: alpha(opacity = 30);/*兼容不同的浏览器*/
    position: absolute;
    display: none;
}
ログイン後にコピー

js

window.onload = function(){//文档内容加载完之后再执行
    //当鼠标移入小图片,显示遮罩层和放大的区域
    $(&#39;small&#39;).onmouseenter = function(){
        $(&#39;mask&#39;).style.display = &#39;block&#39;;
        $(&#39;big&#39;).style.display=&#39;block&#39;;
    }
        //鼠标移出时,隐藏遮罩层和放大的区域
    $(&#39;small&#39;).onmouseleave = function(){
        $(&#39;mask&#39;).style.display=&#39;none&#39;;
        $(&#39;big&#39;).style.display="none";
    }
    //鼠标移动
    $(&#39;small&#39;).onmousemove = function(ev){
        var e = ev || window.event;
        //计算鼠标的位置,并让鼠标显示在遮罩层的中间
        var l = e.clientX - $(&#39;small&#39;).offsetLeft - 50;
        var t = e.clientY - $(&#39;small&#39;).offsetTop -50;
        //别让遮罩层移出图片
        if(l <= 0){
            l = 0;
        }
        if(l >= 500 - 100){
            l = 400;
        }
        if(t <= 0){
            t = 0;
        }
        if(t >= 312 - 100){
            t = 212;
        }
        //遮罩层的移动
        $(&#39;mask&#39;).style.left = l + &#39;px&#39;;
        $(&#39;mask&#39;).style.top = t + &#39;px&#39;;
        //通过遮罩层移动,来计算出放大后图片的显示区域
        $("pic2").style.left = -$("mask").offsetLeft * 2 + &#39;px&#39;;
        $("pic2").style.top = -$("mask").offsetTop * 2 + &#39;px&#39;;
    }
}
//为了更容容易的获取id
function $(id){
    return document.getElementById(id);
}
ログイン後にコピー

以上がJavaScript は虫眼鏡の効果を実装します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート