2、圖片放大后的顯示為本次實(shí)現(xiàn)的關(guān)鍵，通過獲取鼠標(biāo)指針的位置從而獲取指針在圖片的那一個(gè)位置，再以當(dāng)前位置進(jìn)行圖片放大，放大后將圖片進(jìn)行偏移，偏移量以鼠標(biāo)指針在原圖的位置上獲取的left和top值乘以放大倍數(shù)就可以顯示局部放大的功能了

<!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>

本功能在具體操作上還存在一些問題，當(dāng)鼠標(biāo)快速移開原圖區(qū)域時(shí)，無法有效的監(jiān)聽到鼠標(biāo)移出區(qū)域的事件，在考慮使用移出事件時(shí)，鼠標(biāo)懸浮于原圖上的遮罩層影響力鼠標(biāo)在原圖上的移出事件，無法很好的解決，希望各位幫忙移出事件。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: