本篇博文用於簡單記錄圖片放大功能實現
功能實現還存在一些小漏洞在文章結尾提出,希望各位指正
1、圖片放大初考慮將圖片轉換爲字體圖片形式,然後進行放大處理,但最終本人技術不過關無法實現,後用width: 200%;進行一般的圖片放大,所以當圖片越大就存在一些失真;
2、圖片放大後的顯示爲本次實現的關鍵,通過獲取鼠標指針的位置從而獲取指針在圖片的那一個位置,再以當前位置進行圖片放大,放大後將圖片進行偏移,偏移量以鼠標指針在原圖的位置上獲取的left和top值乘以放大倍數就可以顯示局部放大的功能了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
<style>
*{margin: 0;padding: 0;}
.div1{
width: 450px;
height: 300px;
overflow: hidden;
display: inline-block;
}
.div1>img{width: 100%;}
.div2{
width: 450px;
height: 300px;
border: 1px solid #A9A9A9;
overflow: hidden;
display: inline-block;
position: relative;
}
.div2>img{
position: absolute;
width: 200%;
height: 200%;
}
.list1{
width: 70px;
height: 50px;
float: left;
margin-left: 10px;
}
.list1>img{width: 100%;}
#zhezhao{
width: 100px;
height: 100px;
background: #BC8F8F;
opacity: 0.7;
display: none;
position: absolute;
}
</style>
</head>
<body>
<div class="div1">
<img src="../img/wall1.jpg" alt="" class="img1" />
<div id="zhezhao"></div>
</div>
<div class="div2"></div>
<div class="list">
<div class="list1">
<img src="../img/wall2.jpg" alt="" class="listimg1" />
</div>
<div class="list1">
<img src="../img/wall3.jpg" alt="" class="listimg2" />
</div>
<div class="list1">
<img src="../img/wall4.jpg" alt="" class="listimg3" />
</div>
<div class="list1">
<img src="../img/wall6.jpg" alt="" class="listimg4" />
</div>
<div class="list1">
<img src="../img/wall5.jpg" alt="" class="listimg5" />
</div>
</div>
<script>
$(function(){
$('.list1').mouseover(function(){
$('.div1').children()[0].src = $(this).children()[0].src;
});
$('.div1').mousemove(function(e){
$('#zhezhao').css({
left: e.clientX-50+'px',
top: e.clientY-50+'px',
display: 'block'
});
var $img = $('.div1').children().eq(0);
$('.div2').empty();
$('.div2').append($img.clone());
$('.img1').css({
left: -(e.clientX-50)*2+'px',
top: -(e.clientY-50)*2+'px'
});
if(50>e.clientX||e.clientX>450||50>e.clientY||e.clientY>300) {
$('#zhezhao').css({
display: 'none'
});
}else{ //(400<e.clientX&&e.clientX<450||250<e.clientY&&e.clientY<300)
$('#zhezhao').css({
left: e.clientX-50+'px',
top: e.clientY-50+'px',
display: 'block'
});
}
});
});
</script>
</body>
</html>
本功能在具體操作上還存在一些問題,當鼠標快速移開原圖區域時,無法有效的監聽到鼠標移出區域的事件,在考慮使用移出事件時,鼠標懸浮於原圖上的遮罩層影響力鼠標在原圖上的移出事件,無法很好的解決,希望各位幫忙移出事件。