我又來了
今天的內容時如何實作放大器效果
我們在看網購的時候，每個商品都有詳細的介紹圖片
當我們把滑鼠放上去的時候，會出現兩個區域
一個區域是選中圖片的具體位置
另一個區域是高清大圖
需要注意的是，圖片盡量為正方形
例
==原理==其實很簡單：原圖上的遮罩層默認隱藏，將原圖放大，并默認隱藏，原圖默認顯示，當滑鼠進入原圖時，將大圖顯示在一個區域內，并顯示遮罩層，
查看html代碼
查看CSS代碼
查看JavaSript代碼
首先，寫入html代碼
<div class="box1">
<img src="img/02.jpg" alt="">
<div class="shadow"></div>
</div>
<div class="box2">
<img id="img" src="img/02.jpg" alt="">
</div>
回到頂部
然后，寫入CSS樣式，默認隱藏
*{
margin: 0;
padding: 0;
}
div{
display: inline-block;
}
.box1{
width: 200px;
height: 200px;
position: relative;
vertical-align: top;
/* margin-left: 50px; */
border: 1px solid red;
overflow: hidden;
}
.box1 img{
width: 100%;
}
.box2 img{
width: 400px;
}
.box2{
width: 200px;
height: 200px;
overflow: hidden;
display: none;
position: relative;
border: 1px solid black;
}
.box2 img{
position: absolute;
/* top: 0; */
/* left: 0; */
}
.shadow{
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 200, 0.6);
/* top: 0; */
/* left: 0; */
display: none;
}
回到頂部
JavaSript代碼
//默認 大圖和遮罩層 隱藏，滑鼠進入 box1 時顯示,離開時再隱藏
$( ".box1" ).on( "mousemove",function( event ){
$( ".shadow" ).show();
$( ".box2" ).show();
//用相對瀏覽器的距離 減去 可視區域的距離
//因為圖片的位置不一定在頁面最左則
var x=event.pageX - $( ".box1" ).offset().left;
var y=event.pageY - $( ".box1" ).offset().top;
console.log( x,y )
//遮罩層的位置,通過改變css樣式
//上位移量 對應y值，除以 2
//左偏移量 對應x值，除以 2
$( ".shadow" ).css( {
top:`${ y/2 }px`,
left:`${ x/2 }px`
} )
//box2 大圖位置
//大圖不用除以2
$( "#img" ).css( {
top:`${ -y }px`,
left:`${ -x }px`
} )
} )
$( ".box1" ).on( "mouseleave",function(){
$( ".shadow" ).hide();
$( ".box2" ).hide();
} )
回到頂部
好啦，今天發布的有點晚，諸位見諒
我們下期見，拜拜~~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/240071.html
標籤：其他
上一篇：圖片掃描儀特效 html+css
下一篇：微信小程式[渲染層錯誤] TypeError: Cannot read property ‘replace‘ of undefined 【解決辦法】