今天我們來寫一下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差別,我們下次見