一个移入遮罩层消失的放大镜

具体的实现效果如上图，即鼠标移入时遮罩层消失

老规矩，直接上代码，感兴趣的同学可以拉下去自己看看

Meta Meta Meta Document

#<a href="/tag/Box/" target="_blank" class="keywords">Box</a></span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 350px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 350px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        margin</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 50px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        border</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 1px solid #000</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; relative</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
        <span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt; overflow: hidden; </span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
    #mask</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 175.5px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 175.5px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        background</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; url(1122.png) </span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        display</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; none</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        cursor</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; move</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
    #big</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 355px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 400px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 400px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        overflow</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; hidden</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        display</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; none</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        border</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 1px solid #000</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
    #bImg</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 800px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 800px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
    #zzc</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 350px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 350px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        background</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; grey</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        opacity</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; .3</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        position</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; absolute</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        top</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        left</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        overflow</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; hidden</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span><span style="background-color: #f5f5f5; color: #800000"&gt;
    #small</span><span style="background-color: #f5f5f5; color: #000000"&gt;{</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        overflow</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; hidden</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
        height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 100%</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>
    <span style="background-color: #f5f5f5; color: #000000"&gt;}</span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;style</span><span style="color: #0000ff"&gt;></span>

</head>
<body>
<div id="Box">
<div id="small">
<img src="1122.png" id="sImg">
<div id="zzc"></div>
<div id="mask"></div>
</div>
<div id="big">
<img src="1122.png" id="bImg">
</div>
</div>
</body>
</html>
<script>
function $id(id){
return document.getElementById(id);
}

</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; <a href="/tag/Box/" target="_blank" class="keywords">Box</a> </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; $id(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;<a href="/tag/Box/" target="_blank" class="keywords">Box</a></span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; small </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; $id(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;small</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; sImg </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; $id(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;sImg</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; mask </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; $id(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;mask</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; big </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; $id(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;big</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; bImg </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; $id(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;bImg</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; zzc </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; $id(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;zzc</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
</span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt; 鼠标移入事件</span>

small.onmouSEOver = function() {
mask.style.display = "block";
big.style.display = "block";
}
//鼠标移出事件
 small.onmouSEOut = function() {
mask.style.display = "none";
big.style.display = "none";
}
//鼠标移动
 small.onmousemove = function(e){
var e = e || event;
var x= e.pageX - Box.offsetLeft - mask.offsetWidth/2;
var y= e.pageY - Box.offsetTop - mask.offsetHeight/2;
var maxL = Box.offsetWidth - mask.offsetWidth;
var maxT = Box.offsetHeight - mask.offsetHeight;
x = x < 0 ? 0 :(x > maxL ? maxL : x);
y = y < 0 ? 0 :(y > maxT ? maxT : y);
mask.style.left = x + "px";
mask.style.top = y + "px";

    </span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt;mask背景图位置</span>

mask.style.backgroundPosition = -x + "px -" + y +"px";

    </span><span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt;最终的比例关系是这样的：</span>
    <span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt;大图宽度/小图宽度  =  大图可视区big宽度/小图可视区mask宽度 =  大图向左移动距离 /     </span>
    <span style="background-color: #f5f5f5; color: #008000"&gt;//</span><span style="background-color: #f5f5f5; color: #008000"&gt; mask向右移动的距离</span>
    <span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; bigx </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; x </span><span style="background-color: #f5f5f5; color: #000000"&gt;*</span><span style="background-color: #f5f5f5; color: #000000"&gt; bImg.offsetWidth </span><span style="background-color: #f5f5f5; color: #000000"&gt;/</span><span style="background-color: #f5f5f5; color: #000000"&gt; sImg.offsetWidth;
    </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; bigy </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; y </span><span style="background-color: #f5f5f5; color: #000000"&gt;*</span><span style="background-color: #f5f5f5; color: #000000"&gt; bImg.offsetHeight </span><span style="background-color: #f5f5f5; color: #000000"&gt;/</span><span style="background-color: #f5f5f5; color: #000000"&gt; sImg.offsetHeight;
    bImg.style.left </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;-</span><span style="background-color: #f5f5f5; color: #000000"&gt;bigx </span><span style="background-color: #f5f5f5; color: #000000"&gt;+</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;px</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
    bImg.style.top </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;-</span><span style="background-color: #f5f5f5; color: #000000"&gt;bigy </span><span style="background-color: #f5f5f5; color: #000000"&gt;+</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;px</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
}

</script>

一个移入遮罩层消失的放大镜

猜你在找的JavaScript相关文章