今天我们来写一下jQuery的效果来上代码
1,html代码
1 <div id='small'><img src="./icon/images/sj1.jpg" alt="" width='100%'><div id='move'></div></div> 2 <ul id="images"> 3 <li><img class="imgs" src="./icon/images/sj1.jpg" alt="" width="100%"></li> 4 <li><img class="imgs" src="./icon/images/sj6.jpg" alt="" width="100%"></li> 5 <li><img class="imgs" src="./icon/images/sj7.jpg" alt="" width="100%"></li> 6 </ul> 7 <div id='big'><img src="./icon/images/sj1.jpg" alt="" id='img'></div>
2,css代码
1 #small{border:1px solid #ccc;position: absolute;top:220px;} 2 #move{width:150px;height:100px;position: absolute;left:0;top:0;background: url(bg.png);display: none;} 3 #images{position: absolute;top:560px;left:200px;width:1000px;height:100px;} 4 #images li { width: 70px;height: 70px;float: left;margin-right: 10px;border: solid 1px #ccc;padding:4px;} 5 #big{width:300px;height:308px;text-align:center;border:1px solid #ccc;position: absolute;left:500px;top:220px;overflow:hidden;display: none;} 6 #big #img{position: absolute;left:-100px;}
3,jQuery代码
1 //===============================放大镜开始=========================== 2 $("#images img").click(function (){ 3 var src = $(this).attr("src"); 4 //小图 大图 5 $("#small img").attr("src",src); 6 $("#big img").attr("src",src); 7 }); 8 //2 鼠标移动 9 $('#small').mousemove(function(ent){ 10 //大盒子显示 放大镜显示 11 $("#big").css("display","block"); 12 $("#move").css("display","block"); 13 //获得鼠标 14 var ent = ent || window.event; 15 var m_w = $("#move").width(); 16 var m_h = $("#move").height(); 17 //放大镜不能出盒子范围 18 var minX = $("#small").offset().left+m_w/2; 19 var maxX = $("#small").width()+$("#small").offset().left-m_w/2; 20 var minY = $("#small").offset().top+m_h/2; 21 var maxY = $("#small").height()+$("#small").offset().top-m_h/2; 22 if(ent.pageX<minX){ 23 ent.pageX=minX; 24 }else if(ent.pageX>maxX){ 25 ent.pageX=maxX; 26 }else{ 27 $("#move").css("left",(ent.pageX-m_w/2-$("#small").offset().left)); 28 // $("#move").css("left",(ent.pageX-$("#small").offset().left)); 29 } 30 if(ent.pageY<minY){ 31 ent.pageY=minY; 32 }else if(ent.pageY>maxY){ 33 ent.pageY=maxY; 34 }else{ 35 $("#move").css("top",(ent.pageY-m_h/2-$("#small").offset().top)); 36 // $("#move").css("top",(ent.pageY-$("#small").offset().top)); 37 } 38 //大盒子随鼠标的移动位置 39 $("#big").scrollTop((ent.pageY-$("#small").offset().top)*2.5-200); 40 $("#big").scrollLeft((ent.pageX-$("#small").offset().left)*2.5-250); 41 //添加鼠标样式 42 $("#small").css("cursor","move"); 43 }); 44 //3 鼠标移出 45 $("#small").mouseout(function(){ 46 $("#big").css("display","none"); 47 $("#move").css("display","none"); 48 $("#small").css("cursor","default"); 49 }); 50 //===============================放大镜结束===========================
以上就是jQuery实现的放大镜我还是那句话clientx/y与pagex/y的不同不然放大镜bug会很大,下次让我们来了解一下pageX/Y与offsetx/y clientx/y区别,我们下次见