?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 ????????????????//创建一个IFRAME195 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: 0245 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顶点坐标 X377 378 ????????Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y379 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> 网站图片的放大镜效果
原文地址：https://www.cnblogs.com/yangguoe/p/8510890.html