图片放大镜，可以用于商城内的商品图片查看 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>jQuery-放大镜
  6     </title>
  7     <script type="text/javascript" src="F:\zuoye\js\jquery.min.js">
  8     </script>
  9     <script>
 10         $(function(){
 11   var mouseX = 0;
 12   //鼠标移动的位置X
 13   var mouseY = 0;
 14   //鼠标移动的位置Y
 15   var maxLeft = 0;
 16   //最右边
 17   var maxTop = 0;
 18   //最下边
 19   var markLeft = 0;
 20   //放大镜移动的左部距离
 21   var markTop = 0;
 22   //放大镜移动的顶部距离
 23   var perX = 0;
 24   //移动的X百分比
 25   var perY = 0;
 26   //移动的Y百分比
 27   var bigLeft = 0;
 28   //大图要移动left的距离
 29   var bigTop = 0;
 30   //大图要移动top的距离
 31   //改变放大镜的位置
 32   function updataMark($mark){
 33     //通过判断，让小框只能在小图区域中移动        
 34     if(markLeft<0){
 35       markLeft = 0;
 36     }
 37     else if(markLeft>maxLeft){
 38       markLeft = maxLeft;
 39     }
 40     if(markTop<0){
 41       markTop = 0;
 42     }
 43     else if(markTop>maxTop){
 44       markTop = maxTop;
 45     }
 46     //获取放大镜的移动比例，即这个小框在区域中移动的比例
 47     //小框在移动的同时，大图也在相反的移动，具体想了解详细的动作行为，可以把css中的.boxbig中的overflow:hidden备注了，即可
 48     perX = markLeft/$(".small").outerWidth();
 49     perY = markTop/$(".small").outerHeight();
 50     bigLeft = -perX*$(".big").outerWidth();
 51     bigTop = -perY*$(".big").outerHeight();
 52     //设定小框的位置
 53     $mark.css({
 54       "left":markLeft,"top":markTop,"display":"block"}
 55              );
 56   }
 57   //改变大图的位置
 58   function updataBig(){
 59     $(".big").css({
 60       "display":"block","left":bigLeft,"top":bigTop}
 61                  );
 62   }
 63   //鼠标移出时
 64   function cancle(){
 65     $(".big").css({
 66       "display":"none"}
 67                  );
 68     $(".mark").css({
 69       "display":"none"}
 70                   );
 71   }
 72   //鼠标小图上移动时
 73   function imgMouseMove(event){
 74     var $this = $(this);
 75 
 76     //获取small下的子元素
 77     var $mark = $(this).children(".mark");
 78     //鼠标在小图的位置
 79 
 80     //event.pageX:获取鼠标相对屏幕左边的距离
 81     //$this.offset()：获取smll相对屏幕左边的距离
 82     mouseX = event.pageX-$this.offset().left - $mark.outerWidth()/2;
 83     mouseY = event.pageY-$this.offset().top - $mark.outerHeight()/2;
 84     //最大值
 85     maxLeft =$this.width()- $mark.outerWidth();
 86     maxTop =$this.height()- $mark.outerHeight();
 87     markLeft = mouseX;
 88     markTop = mouseY;
 89     updataMark($mark);
 90     updataBig();
 91   }
 92   $(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle);
 93 }
 94  )
 95 
 96     </script>
 97     <style>
 98         *{
 99   margin:0px;
100   padding:0px;
101 }
102 .box{
103   position:relative;
104   margin:10px auto;
105   padding:10px;
106   border:1px solid #666;
107   background:#CCC;
108   width:250px;
109 }
110 .box .small{
111   position:relative;
112   text-align:center;
113   background:#FFF;
114 }
115 .box .small .mark{
116   position:absolute;
117   top:0;
118   left:0;
119   z-index:2;
120   width:80px;
121   height:80px;
122   background:#FFFFFF;
123   filter:alpha(opacity:50);
124   opacity:0.5;
125   border:1px solid #333;
126   display:none;
127 }
128 .box .big{
129   position:absolute;
130   left:225px;
131   top:0;
132   display:none;
133 }
134 .boxbig{
135   position:absolute;
136   left:275px;
137   top:0;
138   width:200px;
139   height:200px;
140   overflow:hidden;
141 }
142     </style>
143 </head>
144 <body>
145     <div class="box">
146         <div class="small">
147             <span class="mark">
148             </span>
149             <img style="width:250px;height:250px;" src="F:\上课文件\完成作业\image\7.jpg" alt="" />
150         </div>
151         <div class="boxbig">
152             <div class="big">
153                 <img src="F:\上课文件\完成作业\image\7.jpg" alt="" />
154             </div>
155         </div>
156     </div>
157 </body>
158 </html>
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>jQuery-放大镜
  6     </title>
  7     <script type="text/javascript" src="F:\zuoye\js\jquery.min.js">
  8     </script>
  9     <script>
 10         $(function(){
 11   var mouseX = 0;
 12   //鼠标移动的位置X
 13   var mouseY = 0;
 14   //鼠标移动的位置Y
 15   var maxLeft = 0;
 16   //最右边
 17   var maxTop = 0;
 18   //最下边
 19   var markLeft = 0;
 20   //放大镜移动的左部距离
 21   var markTop = 0;
 22   //放大镜移动的顶部距离
 23   var perX = 0;
 24   //移动的X百分比
 25   var perY = 0;
 26   //移动的Y百分比
 27   var bigLeft = 0;
 28   //大图要移动left的距离
 29   var bigTop = 0;
 30   //大图要移动top的距离
 31   //改变放大镜的位置
 32   function updataMark($mark){
 33     //通过判断，让小框只能在小图区域中移动        
 34     if(markLeft<0){
 35       markLeft = 0;
 36     }
 37     else if(markLeft>maxLeft){
 38       markLeft = maxLeft;
 39     }
 40     if(markTop<0){
 41       markTop = 0;
 42     }
 43     else if(markTop>maxTop){
 44       markTop = maxTop;
 45     }
 46     //获取放大镜的移动比例，即这个小框在区域中移动的比例
 47     //小框在移动的同时，大图也在相反的移动，具体想了解详细的动作行为，可以把css中的.boxbig中的overflow:hidden备注了，即可
 48     perX = markLeft/$(".small").outerWidth();
 49     perY = markTop/$(".small").outerHeight();
 50     bigLeft = -perX*$(".big").outerWidth();
 51     bigTop = -perY*$(".big").outerHeight();
 52     //设定小框的位置
 53     $mark.css({
 54       "left":markLeft,"top":markTop,"display":"block"}
 55              );
 56   }
 57   //改变大图的位置
 58   function updataBig(){
 59     $(".big").css({
 60       "display":"block","left":bigLeft,"top":bigTop}
 61                  );
 62   }
 63   //鼠标移出时
 64   function cancle(){
 65     $(".big").css({
 66       "display":"none"}
 67                  );
 68     $(".mark").css({
 69       "display":"none"}
 70                   );
 71   }
 72   //鼠标小图上移动时
 73   function imgMouseMove(event){
 74     var $this = $(this);
 75 
 76     //获取small下的子元素
 77     var $mark = $(this).children(".mark");
 78     //鼠标在小图的位置
 79 
 80     //event.pageX:获取鼠标相对屏幕左边的距离
 81     //$this.offset()：获取smll相对屏幕左边的距离
 82     mouseX = event.pageX-$this.offset().left - $mark.outerWidth()/2;
 83     mouseY = event.pageY-$this.offset().top - $mark.outerHeight()/2;
 84     //最大值
 85     maxLeft =$this.width()- $mark.outerWidth();
 86     maxTop =$this.height()- $mark.outerHeight();
 87     markLeft = mouseX;
 88     markTop = mouseY;
 89     updataMark($mark);
 90     updataBig();
 91   }
 92   $(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle);
 93 }
 94  )
 95 
 96     </script>
 97     <style>
 98         *{
 99   margin:0px;
100   padding:0px;
101 }
102 .box{
103   position:relative;
104   margin:10px auto;
105   padding:10px;
106   border:1px solid #666;
107   background:#CCC;
108   width:250px;
109 }
110 .box .small{
111   position:relative;
112   text-align:center;
113   background:#FFF;
114 }
115 .box .small .mark{
116   position:absolute;
117   top:0;
118   left:0;
119   z-index:2;
120   width:80px;
121   height:80px;
122   background:#FFFFFF;
123   filter:alpha(opacity:50);
124   opacity:0.5;
125   border:1px solid #333;
126   display:none;
127 }
128 .box .big{
129   position:absolute;
130   left:225px;
131   top:0;
132   display:none;
133 }
134 .boxbig{
135   position:absolute;
136   left:275px;
137   top:0;
138   width:200px;
139   height:200px;
140   overflow:hidden;
141 }
142     </style>
143 </head>
144 <body>
145     <div class="box">
146         <div class="small">
147             <span class="mark">
148             </span>
149             <img style="width:250px;height:250px;" src="F:\上课文件\完成作业\image\7.jpg" alt="" />
150         </div>
151         <div class="boxbig">
152             <div class="big">
153                 <img src="F:\上课文件\完成作业\image\7.jpg" alt="" />
154             </div>
155         </div>
156     </div>
157 </body>
158 </html>

 

posted @ 2016-12-18 21:16  敲出别样人生  阅读(781)  评论(0)    收藏  举报