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 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>