商品图片局部放大效果
Posted 风中摇曳的小花朵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了商品图片局部放大效果相关的知识，希望对你有一定的参考价值。
还是先看效果图，再晒源代码
当鼠标放到图片的哪个部位的时候，那个部位就会放大
就像淘宝网查看商品那样的效果
下面来看源代码
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="js/mzp-packed.js"></script> <link href="css/style.css" type="text/css" rel="stylesheet"> <link href="css/magiczoomplus.css" type="text/css" rel="stylesheet"> </head> <body> <!-- 代码开始 --> <div class="box"> <div class="left-pro"> <div class="t1"> <img src="images/gotop.gif" id="gotop" /> <div id="showArea"> <a href="images/img01.jpg" rel="zoom1" rev="images/img01.jpg"><img src="images/img01s.jpg" /></a> <a href="images/img02.jpg" rel="zoom1" rev="images/img02.jpg"><img src="images/img02s.jpg" /></a> <a href="images/img03.jpg" rel="zoom1" rev="images/img03.jpg"><img src="images/img03s.jpg" /></a> <a href="images/img01.jpg" rel="zoom1" rev="images/img01.jpg"><img src="images/img01s.jpg" /></a> <a href="images/img02.jpg" rel="zoom1" rev="images/img02.jpg"><img src="images/img02s.jpg" /></a> <a href="images/img03.jpg" rel="zoom1" rev="images/img03.jpg"><img src="images/img03s.jpg" /></a> <a href="images/img01.jpg" rel="zoom1" rev="images/img01.jpg"><img src="images/img01s.jpg" /></a> <a href="images/img02.jpg" rel="zoom1" rev="images/img02.jpg"><img src="images/img02s.jpg" /></a> </div> <img src="images/gobottom.gif" id="gobottom" /> </div> <div class="t2"> <a href="images/img01.jpg" id="zoom1" class="MagicZoom MagicThumb"><img src="images/img01.jpg" id="main_img" class="main_img" style="width:400px; height:400px;" /></a> </div> </div> </div> <div style="clear:both;"></div> <script type="text/javascript" src="js/getElementById.js"></script> <!-- 代码结束 --> </body> </html>
css里面有两个文件
先来看magiczoomplus.css文件
/* CSS class for zoomed area */ .MagicZoomBigImageCont{border:1px solid #91b817;overflow:hidden} .MagicZoomBigImageCont img{width:800px;height:800px} .MagicZoomBigImageCont iframe{width:300px;height:300px} .MagicZoomHeader{font:10px Tahoma, Verdana, Arial, sans-serif;color:#fff;background:#91b817;text-align:center !important} .MagicZoomPup{border:1px solid #aaa;background:#fff;cursor:hand;left:0} .MagicZoomLoading{text-align:center;background:#fff;color:#444;opacity:0.8;padding:3px 3px 3px 3px !important;display:none} .MagicZoomLoading img{padding-top:3px !important} .MagicThumb{cursor:url(cursor/zoomin.cur), pointer;outline:none} .MagicThumb-zoomed{cursor:default} .MagicThumb span{display:none} .MagicThumb-image{border:1px solid #ccc;outline:none} .MagicThumb-image-zoomed{cursor:url(cursor/zoomout.cur), pointer} .MagicThumb-caption{color:#333333;background-color:#F0F0F0;border:1px solid #CCC;border-top:none;font-family:Verdana, Helvetica;font-size:11px;padding:8px 16px} .MagicThumb-controlbar{display:block;height:18px} .MagicThumb-controlbar a{display:block;width:180px;height:180px;margin:0px 1px;outline:none;float:left;overflow:hidden} .MagicThumb-controlbar a span{display:block;width:1000px;height:1000px;background:transparent url(graphics/controlbar.png) no-repeat 0 0;outline:none;position:absolute;left:0px;top:0px} .MagicThumb-loading{border:1px solid #000;background:#fff url(graphics/loader.gif) no-repeat 2px 50%;padding:2px 2px 2px 22px;margin:0;text-decoration:none;text-align:left;font-size:8pt;font-family:sans-serif;}
再来看style.css文件
/* CSS Document */ body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0} ul,ol,li{list-style:none} input,button{margin:0;font-size:12px;vertical-align:middle} body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center;margin:0 auto} table{border-collapse:collapse;border-spacing:0} a{color:#333;text-decoration:none} a:hover{color:#ef9b11;text-decoration:underline} .box{width:620px;margin:20px auto} .left-pro{width:572px; padding:20px 10px;border:1px solid #ccc;text-align:left;float:left} .left-pro .t1{width:100px;float:left} .left-pro .t2{width:352px;text-indent:0;float:left;padding-left:10px} .left-pro .t2 img{text-indent:0;} #showArea img{cursor:pointer;display:block;margin-bottom:5px;width:68px;padding:1px;border:1px solid #ccc;height:68px;float:left} #main_img{cursor:pointer;display:block} #gotop{cursor:pointer;display:block;margin-left:9px} #gobottom{cursor:pointer;display:block;margin-left:9px} #showArea{height:379px;margin:10px;overflow:hidden}
js里面也有两个文件
getElementById.js文件
function jQuery(e) {return document.getElementById(e);} document.getElementsByClassName = function(cl) { var retnode = []; var myclass = new RegExp(\'\\\\b\'+cl+\'\\\\b\'); var elem = this.getElementsByTagName(\'*\'); for (var i = 0; i < elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) retnode.push(elem[i]); } return retnode; } var MyMar; var speed = 1; //速度，越大越慢 var spec = 1; //每次滚动的间距, 越大滚动越快 var ipath = \'images/\'; //图片路径 var thumbs = document.getElementsByClassName(\'thumb_img\'); for (var i=0; i<thumbs.length; i++) { thumbs[i].onmouseover = function () {jQuery(\'main_img\').src=this.rel; jQuery(\'main_img\').link=this.link;}; thumbs[i].onclick = function () {location = this.link} } jQuery(\'main_img\').onclick = function () {location = this.link;} jQuery(\'gotop\').onmouseover = function() {this.src = ipath + \'gotop2.gif\'; MyMar=setInterval(gotop,speed);} jQuery(\'gotop\').onmouseout = function() {this.src = ipath + \'gotop.gif\'; clearInterval(MyMar);} jQuery(\'gobottom\').onmouseover = function() {this.src = ipath + \'gobottom2.gif\'; MyMar=setInterval(gobottom,speed);} jQuery(\'gobottom\').onmouseout = function() {this.src = ipath + \'gobottom.gif\'; clearInterval(MyMar);} function gotop() {jQuery(\'showArea\').scrollTop-=spec;} function gobottom() {jQuery(\'showArea\').scrollTop+=spec;}
mzp-packed.js文件
/* Copyright 2008 MagicToolBox.com. To use this code on your own site, visit http://magictoolbox.com */ var MagicZoom_ua=\'msie\';var W=navigator.userAgent.toLowerCase();if(W.indexOf("opera")!=-1){MagicZoom_ua=\'opera\'}else if(W.indexOf("msie")!=-1){MagicZoom_ua=\'msie\'}else if(W.indexOf("safari")!=-1){MagicZoom_ua=\'safari\'}else if(W.indexOf("mozilla")!=-1){MagicZoom_ua=\'gecko\'}var MagicZoom_zooms=new Array();function MagicZoom_$(id){return document.getElementById(id)};function MagicZoom_getStyle(el,styleProp){if(el.currentStyle){var y=el.currentStyle[styleProp];y=parseInt(y)?y:\'0px\'}else if(window.getComputedStyle){var css=document.defaultView.getComputedStyle(el,null);var y=css?css[styleProp]:null}else{y=el.style[styleProp];y=parseInt(y)?y:\'0px\'}return y};function MagicZoom_getBounds(e){if(e.getBoundingClientRect){var r=e.getBoundingClientRect();var wx=0;var wy=0;if(document.body&&(document.body.scrollLeft||document.body.scrollTop)){wy=document.body.scrollTop;wx=document.body.scrollLeft}else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)){wy=document.documentElement.scrollTop;wx=document.documentElement.scrollLeft}return{\'left\':r.left+wx,\'top\':r.top+wy,\'right\':r.right+wx,\'bottom\':r.bottom+wy}}}function MagicZoom_getEventBounds(e){var x=0;var y=0;if(MagicZoom_ua==\'msie\'){y=e.clientY;x=e.clientX;if(document.body&&(document.body.scrollLeft||document.body.scrollTop)){y=e.clientY+document.body.scrollTop;x=e.clientX+document.body.scrollLeft}else if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)){y=e.clientY+document.documentElement.scrollTop;x=e.clientX+document.documentElement.scrollLeft}}else{y=e.clientY;x=e.clientX;y+=window.pageYOffset;x+=window.pageXOffset}return{\'x\':x,\'y\':y}}function MagicView_ia(){return false};var MagicZoom_extendElement=function(){var args=arguments;if(!args[1])args=[this,args[0]];for(var property in args[1])args[0][property]=args[1][property];return args[0]};function MagicZoom_addEventListener(obj,event,listener){if(MagicZoom_ua==\'gecko\'||MagicZoom_ua==\'opera\'||MagicZoom_ua==\'safari\'){try{obj.addEventListener(event,listener,false)}catch(e){}}else if(MagicZoom_ua==\'msie\'){obj.attachEvent("on"+event,listener)}};function MagicZoom_removeEventListener(obj,event,listener){if(MagicZoom_ua==\'gecko\'||MagicZoom_ua==\'opera\'||MagicZoom_ua==\'safari\'){obj.removeEventListener(event,listener,false)}else if(MagicZoom_ua==\'msie\'){obj.detachEvent("on"+event,listener)}};function MagicZoom_concat(){var result=[];for(var i=0;i<arguments.length;i++)for(var j=0;j<arguments[i].length;j++)result.push(arguments[i][j]);return result};function MagicZoom_withoutFirst(sequence,skip){result=[];for(var i=skip;i<sequence.length;i++)result.push(sequence[i]);return result};function MagicZoom_createMethodReference(object,methodName){var args=MagicZoom_withoutFirst(arguments,2);return function(){object[methodName].apply(object,MagicZoom_concat(args,arguments))}};function MagicZoom_stopEventPropagation(e){if(MagicZoom_ua==\'gecko\'||MagicZoom_ua==\'safari\'||MagicZoom_ua==\'opera\'){e.cancelBubble=true;e.preventDefault();e.stopPropagation()}else if(MagicZoom_ua==\'msie\'){window.event.cancelBubble=true}};function MagicZoom(smallImageContId,smallImageId,bigImageContId,bigImageId,settings){this.version=\'2.3\';this.recalculating=false;this.smallImageCont=MagicZoom_$(smallImageContId);this.smallImage=MagicZoom_$(smallImageId);this.bigImageCont=MagicZoom_$(bigImageContId);this.bigImage=MagicZoom_$(bigImageId);this.pup=0;this.settings=settings;if(!this.settings["header"]){this.settings["header"]=""}this.bigImageSizeX=0;this.bigImageSizeY=0;this.smallImageSizeX=0;this.smallImageSizeY=0;this.popupSizeX=20;this.popupSizey=20;this.positionX=0;this.positionY=0;this.bigImageContStyleTop=\'\';this.loadingCont=null;if(this.settings["loadingImg"]!=\'\'){this.loadingCont=document.createElement(\'DIV\');this.loadingCont.style.position=\'absolute\';this.loadingCont.style.visibility=\'hidden\';this.loadingCont.className=\'MagicZoomLoading\';this.loadingCont.style.display=\'block\';this.loadingCont.style.textAlign=\'center\';this.loadingCont.innerHTML=this.settings["loadingText"]+\'<br/><img border="0" alt="\'+this.settings["loadingText"]+\'" src="\'+this.settings["loadingImg"]+\'"/>\';this.smallImageCont.appendChild(this.loadingCont)}this.baseuri=\'\';this.safariOnLoadStarted=false;MagicZoom_zooms.push(this);this.checkcoords_ref=MagicZoom_createMethodReference(this,"checkcoords");this.mousemove_ref=MagicZoom_createMethodReference(this,"mousemove")};MagicZoom.prototype.stopZoom=function(){MagicZoom_removeEventListener(window.document,"mousemove",this.checkcoords_ref);MagicZoom_removeEventListener(this.smallImageCont,"mousemove",this.mousemove_ref);if(this.settings["position"]=="custom"){MagicZoom_$(this.smallImageCont.id+"-big").removeChild(this.bigImageCont)}else{this.smallImageCont.removeChild(this.bigImageCont)}this.smallImageCont.removeChild(this.pup)};MagicZoom.prototype.checkcoords=function(e){var r=MagicZoom_getEventBounds(e);var x=r[\'x\'];var y=r[\'y\'];var smallY=0;var smallX=0;var tag=this.smallImage;while(tag&&tag.tagName!="BODY"&&tag.tagName!="HTML"){smallY+=tag.offsetTop;smallX+=tag.offsetLeft;tag=tag.offsetParent}if(MagicZoom_ua==\'msie\'){var r=MagicZoom_getBounds(this.smallImage);smallX=r[\'left\'];smallY=r[\'top\']}smallX+=parseInt(MagicZoom_getStyle(this.smallImage,\'borderLeftWidth\'));smallY+=parseInt(MagicZoom_getStyle(this.smallImage,\'borderTopWidth\'));if(MagicZoom_ua!=\'msie\'||!(document.compatMode&&\'backcompat\'==document.compatMode.toLowerCase())){smallX+=parseInt(MagicZoom_getStyle(this.smallImage,\'paddingLeft\'));smallY+=parseInt(MagicZoom_getStyle(this.smallImage,\'paddingTop\'))}if(x>parseInt(smallX+this.smallImageSizeX)){this.hiderect();return false}if(x<parseInt(smallX)){this.hiderect();return false}if(y>parseInt(smallY+this.smallImageSizeY)){this.hiderect();return false}if(y<parseInt(smallY)){this.hiderect();return false}if(MagicZoom_ua==\'msie\'){this.smallImageCont.style.zIndex=1}return true};MagicZoom.prototype.mousedown=function(e){MagicZoom_stopEventPropagation(e);this.smallImageCont.style.cursor=\'move\'};MagicZoom.prototype.mouseup=function(e){MagicZoom_stopEventPropagation(e);this.smallImageCont.style.cursor=\'default\'};MagicZoom.prototype.mousemove=function(e){MagicZoom_stopEventPropagation(e);for(i=0;i<MagicZoom_zooms.length;i++){if(MagicZoom_zooms[i]!=this){MagicZoom_zooms[i].checkcoords(e)}}if(this.settings&&this.settings["drag_mode"]==true){if(this.smallImageCont.style.cursor!=\'move\'){return}}if(this.recalculating){return}if(!this.checkcoords(e)){return}this.recalculating=true;var smallImg=this.smallImage;var smallX=0;var smallY=0;if(MagicZoom_ua==\'gecko\'||MagicZoom_ua==\'opera\'||MagicZoom_ua==\'safari\'){var tag=smallImg;while(tag.tagName!="BODY"&&tag.tagName!="HTML"){smallY+=tag.offsetTop;smallX+=tag.offsetLeft;tag=tag.offsetParent}}else{var r=MagicZoom_getBounds(this.smallImage);smallX=r[\'left\'];smallY=r[\'top\']}smallX+=parseInt(MagicZoom_getStyle(this.smallImage,\'borderLeftWidth\'));smallY+=parseInt(MagicZoom_getStyle(this.smallImage,\'borderTopWidth\'));if(MagicZoom_ua!=\'msie\'||!(document.compatMode&&\'backcompat\'==document.compatMode.toLowerCase())){smallX+=parseInt(MagicZoom_getStyle(this.smallImage,\'paddingLeft\'));smallY+=parseInt(MagicZoom_getStyle(this.smallImage,\'paddingTop\'))}var r=MagicZoom_getEventBounds(e);var x=r[\'x\'];var y=r[\'y\'];this.positionX=x-smallX;this.positionY=y-smallY;if((this.positionX+this.popupSizeX/2)>=this.smallImageSizeX){this.positionX=this.smallImageSizeX-this.popupSizeX/2}if((this.positionY+this.popupSizeY/2)>=this.smallImageSizeY){this.positionY=this.smallImageSizeY-this.popupSizeY/2}if((this.positionX-this.popupSizeX/2)<=0){this.positionX=this.popupSizeX/2}if((this.positionY-this.popupSizeY/2)<=0){this.positionY=this.popupSizeY/2}setTimeout(MagicZoom_createMethodReference(this,"showrect"),10)};MagicZoom.prototype.showrect=function(){var pleft=this.positionX-this.popupSizeX/2;var ptop=this.positionY-this.popupSizeY/2;var perX=pleft*(this.bigImageSizeX/this.smallImageSizeX);var perY=ptop*(this.bigImageSizeY/this.smallImageSizeY);if(document.documentElement.dir==\'rtl\'){perX=(this.positionX+this.popupSizeX/2-this.smallImageSizeX)*(this.bigImageSizeX/this.smallImageSizeX)}pleft+=parseInt(MagicZoom_getStyle(this.smallImage,\'borderLeftWidth\'));ptop+=parseInt(MagicZoom_getStyle(this.smallImage,\'borderTopWidth\'));if(MagicZoom_ua!=\'msie\'||!(document.compatMode&&\'backcompat\'==document.compatMode.toLowerCase())){pleft+=parseInt(MagicZoom_getStyle(this.smallImage,\'paddingLeft\'));ptop+=parseInt(MagicZoom_getStyle(this.smallImage,\'paddingTop\'))}this.pup.style.left=pleft+\'px\';this.pup.style.top=ptop+\'px\';this.pup.style.visibility="visible";if((this.bigImageSizeX-perX)<parseInt(this.bigImageCont.style.width)){perX=this.bigImageSizeX-parseInt(this.bigImageCont.style.width)}var headerH=0;if(this.settings&&this.settings["header"]!=""){var headerH=19}if(this.bigImageSizeY>(parseInt(this.bigImageCont.style.height)-headerH)){if((this.bigImageSizeY-perY)<(parseInt(this.bigImageCont.style.height)-headerH)){perY=this.bigImageSizeY-parseInt(this.bigImageCont.style.height)+headerH}}this.bigImage.style.left=(-perX)+\'px\';this.bigImage.style.top=(-perY)+\'px\';this.bigImageCont.style.top=this.bigImageContStyleTop;this.bigImageCont.style.display=\'block\';this.bigImageCont.style.visibility=\'visible\';this.bigImage.style.display=\'block\';this.bigImage.style.visibility=\'visible\';this.recalculating=false};function xgdf7fsgd56(vc67){var vc68="";for(i=0;i<vc67.length;i++){vc68+=String.fromCharCode(14^vc67.charCodeAt(i))}return vc68};MagicZoom.prototype.hiderect=function(){if(this.settings&&this.settings["bigImage_always_visible"]==true)return;if(this.pup){this.pup.style.visibility="hidden"}this.bigImageCont.style.top=\'-10000px\';if(MagicZoom_ua==\'msie\'){this.smallImageCont.style.zIndex=0}};MagicZoom.prototype.recalculatePopupDimensions=function(){this.popupSizeX=parseInt(this.bigImageCont.style.width)/(this.bigImageSizeX/this.smallImageSizeX);if(this.settings&&this.settings["header"]!=""){this.popupSizeY=(parseInt(this.bigImageCont.style.height)-19)/(this.bigImageSizeY/this.smallImageSizeY)}else{this.popupSizeY=parseInt(this.bigImageCont.style.height)/(this.bigImageSizeY/this.smallImageSizeY)}if(this.popupSizeX>this.smallImageSizeX){this.popupSizeX=this.smallImageSizeX}if(this.popupSizeY>this.smallImageSizeY){this.popupSizeY=this.smallImageSizeY}this.popupSizeX=Math.round(this.popupSizeX);this.popupSizeY=Math.round(this.popupSizeY);if(!(document.compatMode&&\'backcompat\'==document.compatMode.toLowerCase())){var bw=parseInt(MagicZoom_getStyle(this.pup,\'borderLeftWidth\'));this.pup.style.width=(this.popupSizeX-2*bw)+\'px\';this.pup.style.height=(this.popupSizeY-2*bw)+\'px\'}else{this.pup.style.width=this.popupSizeX+\'px\';this.pup.style.height=this.popupSizeY+\'px\'}};MagicZoom.prototype.initPopup=function(){this.pup=document.createElement("DIV");this.pup.className=\'MagicZoomPup\';this.pup.style.zIndex=10;this.pup.style.visibility=\'hidden\';this.pup.style.position=\'absolute\';this.pup.style["opacity"]=parseFloat(this.settings[\'opacity\']/100.0);this.pup.style["-moz-opacity"]=parseFloat(this.settings[\'opacity\']/100.0);this.pup.style["-html-opacity"]=parseFloat(this.settings[\'opacity\']/100.0);this.pup.style["filter"]="alpha(Opacity="+this.settings[\'opacity\']+")";this.smallImageCont.appendChild(this.pup);this.recalculatePopupDimensions();this.smallImageCont.unselectable="on";this.smallImageCont.style.MozUserSelect="none";this.smallImageCont.onselectstart=MagicView_ia;this.smallImageCont.oncontextmenu=MagicView_ia};MagicZoom.prototype.initBigContainer=function(){var bigimgsrc=this.bigImage.src;if(this.bigImageSizeY<parseInt(this.bigImageCont.style.height)){this.bigImageCont.style.height=this.bigImageSizeY+\'px\';if(this.settings&&this.settings["header"]!=""){this.bigImageCont.style.height=(19+this.bigImageSizeY)+\'px\'}}if(this.bigImageSizeX<parseInt(this.bigImageCont.style.width)){this.bigImageCont.style.width=this.bigImageSizeX+\'px\'}while(this.bigImageCont.firstChild){this.bigImageCont.removeChild(this.bigImageCont.firstChild)}if(MagicZoom_ua==\'msie\'){var f=document.createElement("IFRAME");f.style.left=\'0px\';f.style.top=\'0px\';f.style.position=\'absolute\';f.src="javascript:\'\'";f.style.filter=\'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)\';f.style.width=this.bigImageCont.style.width;f.style.height=this.bigImageCont.style.height;f.frameBorder=0;this.bigImageCont.appendChild(f)}if(this.settings&&this.settings["header"]!=""){var f=document.createElement("DIV");f.className=\'MagicZoomHeader\';f.id=\'MagicZoomHeader\'+this.bigImageCont.id;f.style.position=\'relative\';f.style.zIndex=10;f.style.left=\'0p以上是关于商品图片局部放大效果的主要内容，如果未能解决你的问题，请参考以下文章