フロントエンド: html+css+js を使用して、JD.com の製品画像エリアのズームイン効果を模倣します。
1 はじめに
最近、Web ページで JD.com の製品を閲覧したときに、上記の gif 画像で実現された特殊効果が良いと感じたので、html+css+js 技術を使用して上記の特殊効果を実現することを計画しました。効果は次のとおりです。
2. フロントエンドインターフェース
主にフローティング、絶対配置、相対配置などの知識を使用しますので、この部分が理解できない方はまず理解してから編集者のこのブログ記事を読んでいただければと思います。実装当初は多くの問題がありましたが、最終的には img タグを直接使用するのではなく、背景画像属性を設定することを検討してください。ボックスの幅と高さが背景画像のサイズより小さい場合、背景画像の一部のみが表示されることがわかっています。背景 -position 属性値が設定されていない場合、デフォルトでは、表示される画像部分は背景画像の左上隅。
このうち、class属性値small_imgとbig_imgを持つボックスは左にfloatに設定され、small_imgは相対位置に配置されるように設定され、big_imgの表示はnoneに設定されています(デフォルトでは表示されず、マウスが画像領域内に移動した場合にのみ表示されます); クラス属性 値が other であるボックスは絶対配置に設定され、その表示プロパティ値は none (デフォルトでは表示されず、マウスが画像領域に移動します)。
3. マウスの動きの効果を実現する js
マウスが画面領域内に移動したとき、マウスはもう一方のボックスの中心にあると考えると、マウスの位置が画面領域の端にある場合のみ、マウスがもう一方のボックスの中心にいないことになります。このため、マウスは small_img 内にあります ボックスの位置は、次のような一連の判断を行うために使用されます
。 small_imgの背景画像（幅、高さともに450px）とbig_imgの背景画像（幅、高さともに800px）について、一連の判定が行われましたが、まだ判定が行われない場合があります。たとえば、エッジ ケースでは、mouseX は要件を満たしている可能性がありますが、mouseY は条件を満たしていない可能性があります。この初期条件では、x=mouseX、y=mouseY となります。
4. コードを実装する
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东商城图片</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
width: 900px;
height: 450px;
margin: 20px auto;
}
.main >div{
width: 450px;
height: 450px;
z-index: 2;
float: left;
}
.small_img{
background-image: url('https://img10.360buyimg.com/n1/s450x450_jfs/t1/211447/30/24860/68358/62e8fa30Ed16f2c10/3897f1eb3281d4cd.jpg');
position: relative;
}
.big_img{
display: none;
width: 400px !important;
height: 400px !important;
background-image: url('https://img10.360buyimg.com//n0/jfs/t1/211447/30/24860/68358/62e8fa30Ed16f2c10/3897f1eb3281d4cd.jpg');
background-repeat: no-repeat;
}
.other{
width: 225px;
height: 225px;
background-color: rgba(1, 1, 1, 0.2);
z-index: 3;
position: absolute;
cursor: move;
display: none;
}
</style>
</head>
<body>
<div class="main">
<div class="small_img">
<div class="other">
</div>
</div>
<div class="big_img">
</div>
</div>
</body>
<script type="text/javascript">
const small_img = document.querySelector('.small_img');
const other = document.querySelector('.other');
const big_img = document.querySelector('.big_img');
const a = 800 / 450 ;
small_img.onmouseover = ()=>{
other.style.display = 'block';
big_img.style.display = 'block';
small_img.onmousemove = (e) => {
let mouseX = e.clientX - small_img.getBoundingClientRect().left;
let mouseY = e.clientY - small_img.getBoundingClientRect().top;
let x = mouseX,y = mouseX;
if (mouseX < 112.5)
x = 0;
if (mouseY < 112.5)
y = 0;
if (mouseX > 450 - 112.5)
x = 225 + 'px';
if (mouseY > 450 - 112.5)
y = 225 + 'px';
if (mouseX >= 112.5 && mouseX <= 450 - 112.5)
x = mouseX - 112.5 + 'px';
if (mouseY >= 112.5 && mouseY <= 450 - 112.5)
y = mouseY - 112.5 + 'px';
other.style.left = parseFloat(x) + 'px';
other.style.top = parseFloat(y) + 'px';
big_img.style.backgroundPosition = `-${
parseFloat(x) * a}px -${
parseFloat(y) * a}px`;
}
}
small_img.onmouseout = () => {
other.style.display = 'none';
big_img.style.display = 'none';
}
</script>
</html>