图片放大镜，可以用于商城内的商品图片查看
Posted 敲出别样人生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片放大镜，可以用于商城内的商品图片查看相关的知识，希望对你有一定的参考价值。
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>
以上是关于图片放大镜，可以用于商城内的商品图片查看的主要内容，如果未能解决你的问题，请参考以下文章