js簡単なルーペ効果を実現します。
本論文の例では、簡単な拡大鏡効果を実現するためのjsの具体的なコードを共有しています。
まず効果を見てみます。
ルーペを書く前に、位置を確認します。
通常、子絶父相(親元素相対位置決め、子元素絶対位置決め)
元素の位置付け:
1、static 静的な位置決め、すべての要素は、任意の位置決め方式を追加しない場合のデフォルトの状態です。
2、relative 相対的な位置付けは、ドキュメントの流れから逸脱することなく、自身の元の位置に対して、シフトすることができます。
3、fixed 位置を固定し、文書の流れを完全に逸脱し、ブラウザの空白領域に対してシフトし、ブラウザのスクロールによってスクロールしない。
4、absolute 絶対位置を特定し、ドキュメントの流れを完全に逸脱し、上のNレベルの要素に対して位置決めし、 親レベルの要素が相対的、絶対的または固定的な位置決め方式を持っていない場合、絶対的に位置決めされた要素はより上位の方に検索されます。
まず箱と拡大箱の位置を決めてから拡大箱を隠します。
ページのロードが完了したら、ボックスにマウスをバインドしてイベントを移動します。
①移動の割合に応じて、大図の移動座標を設定します。
②大図の移動座標=カバーのオフセット量*大ピクチャの最大移動可能距離/ カバーの最大可動距離
③=オフセット量*(画像の幅-bigBoxの幅)/markMax
まず効果を見てみます。
ルーペを書く前に、位置を確認します。
通常、子絶父相(親元素相対位置決め、子元素絶対位置決め)
元素の位置付け:
1、static 静的な位置決め、すべての要素は、任意の位置決め方式を追加しない場合のデフォルトの状態です。
2、relative 相対的な位置付けは、ドキュメントの流れから逸脱することなく、自身の元の位置に対して、シフトすることができます。
3、fixed 位置を固定し、文書の流れを完全に逸脱し、ブラウザの空白領域に対してシフトし、ブラウザのスクロールによってスクロールしない。
4、absolute 絶対位置を特定し、ドキュメントの流れを完全に逸脱し、上のNレベルの要素に対して位置決めし、 親レベルの要素が相対的、絶対的または固定的な位置決め方式を持っていない場合、絶対的に位置決めされた要素はより上位の方に検索されます。
まず箱と拡大箱の位置を決めてから拡大箱を隠します。
.box {
width: 450px;
height: 450px;
margin: 100px 0 0 100px;
border: 1px solid red;
position: relative;
}
/* */
.bigBox{
width: 540px;
height: 540px;
position: absolute;
top: 100px;
left: 560px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.bigBox img {
position: absolute;
left: 0;
top: 0;
}
/* */
.box .mask{
width: 260px;
height: 260px;
background-color: yellow;
/* */
opacity: .4;
position: absolute;
left: 0;
top: 0;
/* */
display: none;
}
jsを書く時、注意します。ページのロードが完了したら、ボックスにマウスをバインドしてイベントを移動します。
<script>
window.onload = function (){
var box = document.querySelector(".box");
var mask = document.querySelector(".mask");
var bigBox = document.querySelector(".bigBox");
var bigImg = document.querySelector(".bigBox > img");
console.log(bigImg);
//
box.onmouseover = function (){
document.querySelector(".mask").style.display = "block";
document.querySelector(".bigBox").style.display = "block";
}
//
box.onmouseout = function (){
document.querySelector(".mask").style.display = "none";
document.querySelector(".bigBox").style.display = "none";
}
//
box.onmousemove = function (){
// box 100 , ,
var left = event.pageX - 100 - 130;
var top = event.pageY - 100 - 130;
// box ,
// box
var maskMax = this.offsetWidth - mask.offsetWidth;
// left
if(left <= 0){
left = 0;
}else if(left >= maskMax){
left = maskMax;
}
// top
if(top <= 0){
top = 0;
}else if(top >= maskMax){
top = maskMax;
}
// left,top
mask.style.left = left + "px";
mask.style.top = top + "px";
mask.style.cursor = "move";
注意:①移動の割合に応じて、大図の移動座標を設定します。
②大図の移動座標=カバーのオフセット量*大ピクチャの最大移動可能距離/ カバーの最大可動距離
③=オフセット量*(画像の幅-bigBoxの幅)/markMax
//
var bigImgMax = bigImg.offsetWidth - bigBox.offsetWidth;
// left
var bigImgX = mask.offsetLeft * bigImgMax / maskMax;
// top
var bigImgY = mask.offsetTop * bigImgMax / maskMax;
// ,
bigImg.style.left = -bigImgX + "px";
bigImg.style.top = -bigImgY + "px";
}
}
マルクは虫めがね(黄色の部分)です。
<div class="box">
<img src="../img/small.jpg" alt="">
<div class="mask">
</div>
<div class="bigBox">
<img src="../img/big.jpg" alt="">
</div>
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。