はじめに:
私は多くの学生が買い物にサイトを閲覧することを信じて、頻繁に日常のウェブサイトで使用される虫眼鏡機能、前に使用されようとしています。その後、我々はそれが今あるものを実現するために始めました。
(1)まず、虫眼鏡HTMLアーキテクチャの効果を見て、次の図では、二つの部分から構成されています。
html:
<div id="box">
<div id="small"></div>
</div>
<div id="big">
<img src="12.png" id="imgs"/>
</div>
幅と高さが100%である増幅背景画像を必要とするボックス、背景を設定する第1の部分は、原則です。あなたは完全なボックスを保持することができるように続いて、300ピクセルに背景画像を幅と高さのセットをボックス。その後のMouseMoveイベントは、ボックスを聞くことによって、小さなボックスコントロールは、赤いブロックを移動します。小さなボックスは、ブロックが場所を増幅することである赤。
原理の第2の部分は:ボックスの幅の3倍の大き内部に配置されたIMG(ここで3回は、もちろん、この値は自由に選択することができ、拡大鏡の倍率です。)。ブロックの幅と高さは、IMGの表示を制限するための大きな350pxには、ですが。拡大鏡のとIMGを移動させることにより効果を達成するために、上部を残しました。
css代码:
html,body {
margin: 0;
padding:0;
}
#box{
width: 300px;
height: 300px;
position: relative;
background: url(12.png);
background-size:100% 100%;
}
#box #small{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background: red;
opacity: 0.6;
}
#big{
width: 350px;
height: 350px;
overflow: hidden;
position: relative;
display: none;
}
#big img{
width: 900px;
height: 900px;
position: absolute;
}
(2)部品のJS:
var box = document.querySelector('#box');
var small = document.querySelector('#small');
var big = document.querySelector('#big');
var img = document.querySelector('#imgs');
//监听box的mousemove事件
box.onmousemove = function(e){
//获取鼠标的x、y坐标。为什么要减去50呢?为了让鼠标刚好在small红色小方块的中心。
var top = e.clientY-50;
var left = e.clientX-50;
//限制small小方块移出box的范围
if(top > 200){top = 200};
if(top < 0){top = 0};
if(left > 200){left = 200};
if(left < 0){left = 0};
//动态设置small小方块的位置,让小方块跟随鼠标移动
small.style.left = left + 'px';
small.style.top = top + 'px';
//让big里面的图片跟随鼠标的移动而移动。这里为什么要乘以(-3)呢?因为big里面的大图是box的3倍。鼠标在box上面向右移动1px,那么big里面的大图就要向左移动(1 x -3)px才能达到我们想要的效果。
img.style.top = top*(-3) + 'px';
img.style.left = left*(-3) + 'px';
}
//监听box的onmouseenter事件
box.onmouseenter = function(e){
//当鼠标进入box范围的时候,显示放大效果
big.style.display='block';
}
//监听box的onmouseleave 事件
box.onmouseleave = function(e){
//当鼠标移出box范围的时候,隐藏放大效果
big.style.display='none';
}
まあ、CSS + JSは、ここではガラスの機能を拡大することは完了です達成します。それは非常に簡単です。しかし、これは達成するだけの簡単な実装、および使用のキャンバスです。
多くのことを理解するように私達はちょうど、もう一度自分をノック、ああ巻き込まないで行うことはできません。