网站图片的放大镜效果 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 
  3 <html xmlns="http://www.w3.org/1999/xhtml">
  4 
  5 <head>
  6 
  7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8 
  9 <title>jQuery网站商品图片放大镜效</title>
 10 
 11 <script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
 12 
 13 <style type="text/css">
 14 
 15 /* reset */
 16 
 17 body{font:12px/18px "宋体",arial,sans-serif;color:#585858;}
 18 
 19 body,div,p,span,form,iframe,table,td,th,input,textarea,button,label,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
 20 
 21 h1,h2,h3,h4,h5,h6{font-size:100%; }
 22 
 23 ul,ol,li,dl{list-style-type:none;}
 24 
 25 em,i,dfn,cite,strong,small{font-style:normal;} 
 26 
 27 img{border:0;}
 28 
 29 fieldset,button,input,select,option{vertical-align:middle;font:12px/18px "宋体",arial,sans-serif;}
 30 
 31 table{border-collapse:collapse;border-spacing:0}
 32 
 33 textarea{resize:none}
 34 
 35 /* color */
 36 
 37 a:link,a:visited{color:#575757;text-decoration:none;}
 38 
 39 a:hover{color:#ef4165;text-decoration:none;}
 40 
 41 a:active{color:#1d7400;}
 42 
 43 /* clearfix */
 44 
 45 .clearfix:after{ visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
 46 
 47 *html .clearfix{ zoom:1;}
 48 
 49 
 50 
 51 
 52 
 53 
 54 .preview{width:400px; height:465px; margin:50px 0px 0px 150px;}
 55 
 56 /* smallImg */
 57 
 58 .smallImg{position:relative; height:52px; margin-top:1px; background-color:#F1F0F0; padding:6px 5px; width:390px; overflow:hidden;float:left;}
 59 
 60 .scrollbutton{width:14px; height:50px; overflow:hidden; position:relative; float:left; cursor:pointer; }
 61 
 62 .scrollbutton.smallImgUp , .scrollbutton.smallImgUp.disabled{background:url(images/d_08.png) no-repeat;}
 63 
 64 .scrollbutton.smallImgDown , .scrollbutton.smallImgDown.disabled{background:url(images/d_09.png) no-repeat; margin-left:375px; margin-top:-50px;}
 65 
 66 
 67 
 68 #imageMenu {height:50px; width:360px; overflow:hidden; margin-left:0; float:left;}
 69 
 70 #imageMenu li {height:50px; width:60px; overflow:hidden; float:left; text-align:center;}
 71 
 72 #imageMenu li img{width:50px; height:50px;cursor:pointer;}
 73 
 74 #imageMenu li#onlickImg img, #imageMenu li:hover img{ width:44px; height:44px; border:3px solid #959595;}
 75 
 76 /* bigImg */
 77 
 78 .bigImg{position:relative; float:left; width:400px; height:400px; overflow:hidden;}
 79 
 80 .bigImg #midimg{width:400px; height:400px;}
 81 
 82 .bigImg #winSelector{width:235px; height:210px;}
 83 
 84 #winSelector{position:absolute; cursor:crosshair; filter:alpha(opacity=15); -moz-opacity:0.15; opacity:0.15; background-color:#000; border:1px solid #fff;}
 85 
 86 /* bigView */
 87 
 88 #bigView{position:absolute;border: 1px solid #959595; overflow: hidden; z-index:999;}
 89 
 90 #bigView img{position:absolute;}
 91 
 92 </style>
 93 
 94 </head>
 95 
 96 <body>
 97 
 98 <div class="preview">
 99 
100     <div id="vertical" class="bigImg">
101 
102         <img src="mid/05.jpg" width="400" height="400" alt="" id="midimg" />
103 
104         <div style="display:none;" id="winSelector"></div>
105 
106     </div><!--bigImg end-->    
107 
108     <div class="smallImg">
109 
110         <div class="scrollbutton smallImgUp disabled"></div>
111 
112         <div id="imageMenu">
113 
114             <ul>
115 
116                 <li id="onlickImg"><img src="small/05.jpg" width="68" height="68" alt="洋妞"/></li>
117 
118                 <li><img src="small/02.jpg" width="68" height="68" alt="洋妞"/></li>
119 
120                 <li><img src="small/03.jpg" width="68" height="68" alt="洋妞"/></li>
121 
122                 <li><img src="small/04.jpg" width="68" height="68" alt="洋妞"/></li>
123 
124                 <li><img src="small/01.jpg" width="68" height="68" alt="洋妞"/></li>
125 
126                 <li><img src="small/06.jpg" width="68" height="68" alt="洋妞"/></li>
127 
128                 <li><img src="small/04.jpg" width="68" height="68" alt="洋妞"/></li>
129 
130             </ul>
131 
132         </div>
133 
134         <div class="scrollbutton smallImgDown"></div>
135 
136     </div><!--smallImg end-->    
137 
138     <div id="bigView" style="display:none;"><img width="800" height="800" alt="" src="" /></div>
139 
140 </div>
141 
142 <!--preview end-->
143 
144 <script type="text/javascript">
145 
146 $(document).ready(function(){
147 
148     // 图片上下滚动
149 
150     var count = $("#imageMenu li").length - 5; /* 显示 6 个 li标签内容 */
151 
152     var interval = $("#imageMenu li:first").width();
153 
154     var curIndex = 0;
155 
156     
157 
158     $('.scrollbutton').click(function(){
159 
160         if( $(this).hasClass('disabled') ) return false;
161 
162         
163 
164         if ($(this).hasClass('smallImgUp')) --curIndex;
165 
166         else ++curIndex;
167 
168         
169 
170         $('.scrollbutton').removeClass('disabled');
171 
172         if (curIndex == 0) $('.smallImgUp').addClass('disabled');
173 
174         if (curIndex == count-1) $('.smallImgDown').addClass('disabled');
175 
176         
177 
178         $("#imageMenu ul").stop(false, true).animate({"marginLeft" : -curIndex*interval + "px"}, 600);
179 
180     });    
181 
182     // 解决 ie6 select框 问题
183 
184     $.fn.decorateIframe = function(options) {
185 
186         if ($.browser.msie && $.browser.version < 7) {
187 
188             var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
189 
190             $(this).each(function() {
191 
192                 var $myThis = $(this);
193 
194                 //创建一个IFRAME
195 
196                 var divIframe = $("<iframe />");
197 
198                 divIframe.attr("id", opts.iframeId);
199 
200                 divIframe.css("position", "absolute");
201 
202                 divIframe.css("display", "none");
203 
204                 divIframe.css("display", "block");
205 
206                 divIframe.css("z-index", opts.iframeZIndex);
207 
208                 divIframe.css("border");
209 
210                 divIframe.css("top", "0");
211 
212                 divIframe.css("left", "0");
213 
214                 if (opts.width == 0) {
215 
216                     divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
217 
218                 }
219 
220                 if (opts.height == 0) {
221 
222                     divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
223 
224                 }
225 
226                 divIframe.css("filter", "mask(color=#fff)");
227 
228                 $myThis.append(divIframe);
229 
230             });
231 
232         }
233 
234     }
235 
236     $.fn.decorateIframe.defaults = {
237 
238         iframeId: "decorateIframe1",
239 
240         iframeZIndex: -1,
241 
242         width: 0,
243 
244         height: 0
245 
246     }
247 
248     //放大镜视窗
249 
250     $("#bigView").decorateIframe();
251 
252     //点击到中图
253 
254     var midChangeHandler = null;
255 
256     
257 
258     $("#imageMenu li img").bind("click", function(){
259 
260         if ($(this).attr("id") != "onlickImg") {
261 
262             midChange($(this).attr("src").replace("small", "mid"));
263 
264             $("#imageMenu li").removeAttr("id");
265 
266             $(this).parent().attr("id", "onlickImg");
267 
268         }
269 
270     }).bind("mouseover", function(){
271 
272         if ($(this).attr("id") != "onlickImg") {
273 
274             window.clearTimeout(midChangeHandler);
275 
276             midChange($(this).attr("src").replace("small", "mid"));
277 
278             $(this).css({ "border": "3px solid #959595" });
279 
280         }
281 
282     }).bind("mouseout", function(){
283 
284         if($(this).attr("id") != "onlickImg"){
285 
286             $(this).removeAttr("style");
287 
288             midChangeHandler = window.setTimeout(function(){
289 
290                 midChange($("#onlickImg img").attr("src").replace("small", "mid"));
291 
292             }, 1000);
293 
294         }
295 
296     });
297 
298     function midChange(src) {
299 
300         $("#midimg").attr("src", src).load(function() {
301 
302             changeViewImg();
303 
304         });
305 
306     }
307 
308     //大视窗看图
309 
310     function mouseover(e) {
311 
312         if ($("#winSelector").css("display") == "none") {
313 
314             $("#winSelector,#bigView").show();
315 
316         }
317 
318         $("#winSelector").css(fixedPosition(e));
319 
320         e.stopPropagation();
321 
322     }
323 
324     function mouseOut(e) {
325 
326         if ($("#winSelector").css("display") != "none") {
327 
328             $("#winSelector,#bigView").hide();
329 
330         }
331 
332         e.stopPropagation();
333 
334     }
335 
336     $("#midimg").mouseover(mouseover); //中图事件
337 
338     $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件
339 
340 
341 
342     var $divWidth = $("#winSelector").width(); //选择器宽度
343 
344     var $divHeight = $("#winSelector").height(); //选择器高度
345 
346     var $imgWidth = $("#midimg").width(); //中图宽度
347 
348     var $imgHeight = $("#midimg").height(); //中图高度
349 
350     var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度
351 
352 
353 
354     function changeViewImg() {
355 
356         $("#bigView img").attr("src", $("#midimg").attr("src").replace("mid", "big"));
357 
358     }
359 
360     changeViewImg();
361 
362     $("#bigView").scrollLeft(0).scrollTop(0);
363 
364     function fixedPosition(e) {
365 
366         if (e == null) {
367 
368             return;
369 
370         }
371 
372         var $imgLeft = $("#midimg").offset().left; //中图左边距
373 
374         var $imgTop = $("#midimg").offset().top; //中图上边距
375 
376         X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
377 
378         Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
379 
380         X = X < 0 ? 0 : X;
381 
382         Y = Y < 0 ? 0 : Y;
383 
384         X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
385 
386         Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;
387 
388 
389 
390         if ($viewImgWidth == null) {
391 
392             $viewImgWidth = $("#bigView img").outerWidth();
393 
394             $viewImgHeight = $("#bigView img").height();
395 
396             if ($viewImgWidth < 200 || $viewImgHeight < 200) {
397 
398                 $viewImgWidth = $viewImgHeight = 800;
399 
400             }
401 
402             $height = $divHeight * $viewImgHeight / $imgHeight;
403 
404             $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
405 
406             $("#bigView").height($height);
407 
408         }
409 
410         var scrollX = X * $viewImgWidth / $imgWidth;
411 
412         var scrollY = Y * $viewImgHeight / $imgHeight;
413 
414         $("#bigView img").css({ "left": scrollX * -1, "top": scrollY * -1 });
415 
416         $("#bigView").css({ "top": 75, "left": $(".preview").offset().left + $(".preview").width() + 15 });
417 
418 
419 
420         return { left: X, top: Y };
421 
422     }
423 
424 });
425 
426 </script>
427 
428 </body>
429 
430 </html>

 

posted @ 2018-03-05 19:39  前端极客  阅读(317)  评论(0)  编辑  收藏  举报