放大鏡可以說是前端人必須學(xué)會(huì)的程序之一,今天的案例為大家展示一下怎么實(shí)現(xiàn)放大鏡的效果！
效果圖展示
整個(gè)效果就是當(dāng)鼠標(biāo)放到展示圖上的時(shí)候，會(huì)出現(xiàn)一個(gè)遮罩層以及彈出來一個(gè)框展示一個(gè)詳情圖，并且鼠標(biāo)移動(dòng)的時(shí)候詳情圖跟著移動(dòng)，鼠標(biāo)離開詳情圖消失。
HTML代碼：
<html>
<head>
<style>
#small{
width: 500px;
height: 312px;
position: absolute;
left: 20px;
top: 20px;
}
#pic1{
position: absolute;
left: 0px;
top: 0px;
}
#pic1 img{
width: 100%;
height: 100%;
}
#big{
width: 200px;
height: 200px;
position: absolute;
left: 550px;
top: 50px;
border: 1px solid blue;
overflow: hidden;
}
#pic2{
width: 1000px;
height: 625px;
position: absolute;
left: 0;
top: 0;
}
#pic2 img{
width: 100%;
height: 100%;
}
#mask{
width: 100px;
height: 100px;
background: black;
opacity: 0.3;/*讓遮罩層看起來透明*/
filter: alpha(opacity = 30);/*兼容不同的瀏覽器*/
position: absolute;
display: none;
}
</style>
<script>
window.onload = function(){//文檔內(nèi)容加載完之后再執(zhí)行
//當(dāng)鼠標(biāo)移入小圖片，顯示遮罩層和放大的區(qū)域
$('small').onmouseenter = function(){
$('mask').style.display = 'block';
$('big').style.display='block';
}
//鼠標(biāo)移出時(shí)，隱藏遮罩層和放大的區(qū)域
$('small').onmouseleave = function(){
$('mask').style.display='none';
$('big').style.display="none";
}
//鼠標(biāo)移動(dòng)
$('small').onmousemove = function(ev){
var e = ev || window.event;
//計(jì)算鼠標(biāo)的位置，并讓鼠標(biāo)顯示在遮罩層的中間
var l = e.clientX - $('small').offsetLeft - 50;
var t = e.clientY - $('small').offsetTop -50;
//別讓遮罩層移出圖片
if(l <= 0){
l = 0;
}
if(l >= 500 - 100){
l = 400;
}
if(t <= 0){
t = 0;
}
if(t >= 312 - 100){
t = 212;
}
//遮罩層的移動(dòng)
$('mask').style.left = l + 'px';
$('mask').style.top = t + 'px';
//通過遮罩層移動(dòng)，來計(jì)算出放大后圖片的顯示區(qū)域
$("pic2").style.left = -$("mask").offsetLeft * 2 + 'px';
$("pic2").style.top = -$("mask").offsetTop * 2 + 'px';
}
}
//為了更容容易的獲取id
function $(id){
return document.getElementById(id);
}
</script>
</head>
<div id="small">
<div id="pic1">
<img src="mm.jpg" alt="">
</div>
<div id="mask"></div>
</div>
<div id="big">
<div id="pic2">
<img src="mm.jpg" alt="">
</div>
</div>
</html>
