.elementor-67523 .elementor-element.elementor-element-da04795{--divider-border-style:double;--divider-color:#8f0707;--divider-border-width:1px}.elementor-67523 .elementor-element.elementor-element-da04795 .elementor-divider-separator{width:100%}.elementor-67523 .elementor-element.elementor-element-da04795 .elementor-divider{padding-block-start:15px;padding-block-end:15px}.elementor-67523 .elementor-element.elementor-element-48e077d>.elementor-widget-container{margin:-10px}.elementor-67523 .elementor-element.elementor-element-fddf148{--divider-border-style:double;--divider-color:#8f0707;--divider-border-width:1px}.elementor-67523 .elementor-element.elementor-element-fddf148 .elementor-divider-separator{width:100%}.elementor-67523 .elementor-element.elementor-element-fddf148 .elementor-divider{padding-block-start:15px;padding-block-end:15px}.elementor-67523 .elementor-element.elementor-element-9843b5d .elementor-wrapper{--video-aspect-ratio:1.77777}.elementor-67523 .elementor-element.elementor-element-40961f4{--divider-border-style:double;--divider-color:#8f0707;--divider-border-width:1px}.elementor-67523 .elementor-element.elementor-element-40961f4 .elementor-divider-separator{width:100%}.elementor-67523 .elementor-element.elementor-element-40961f4 .elementor-divider{padding-block-start:15px;padding-block-end:15px}.elementor-67523 .elementor-element.elementor-element-8e7d6be .elementor-wrapper{--video-aspect-ratio:1;filter:brightness(100%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg)}.elementor-67523 .elementor-element.elementor-element-aeba29c .elementor-wrapper{--video-aspect-ratio:1.77777}.elementor-67523 .elementor-element.elementor-element-0f97356 .elementor-wrapper{--video-aspect-ratio:1.77777}.elementor-67523 .elementor-element.elementor-element-c5e462f{--spacer-size:50px}.elementor-67523 .elementor-element.elementor-element-1133136{--divider-border-style:double;--divider-color:#8f0707;--divider-border-width:1px}.elementor-67523 .elementor-element.elementor-element-1133136 .elementor-divider-separator{width:100%}.elementor-67523 .elementor-element.elementor-element-1133136 .elementor-divider{padding-block-start:15px;padding-block-end:15px}.elementor-67523 .elementor-element.elementor-element-20d8bc0{text-align:center}.elementor-67523 .elementor-element.elementor-element-20d8bc0 img{width:100%}.elementor-67523 .elementor-element.elementor-element-45f717c{--spacer-size:10px}.elementor-67523 .elementor-element.elementor-element-9b1a59f .elementor-progress-wrapper .elementor-progress-bar{background-color:#ba0203}.elementor-67523 .elementor-element.elementor-element-9b1a59f .elementor-progress-wrapper{border-radius:100px;overflow:hidden}.elementor-67523 .elementor-element.elementor-element-60acb02 .elementor-progress-wrapper .elementor-progress-bar{background-color:#ba0203}.elementor-67523 .elementor-element.elementor-element-60acb02 .elementor-progress-wrapper{border-radius:100px;overflow:hidden}.elementor-67523 .elementor-element.elementor-element-590cad4 .elementor-progress-wrapper .elementor-progress-bar{background-color:#ba0203}.elementor-67523 .elementor-element.elementor-element-590cad4 .elementor-progress-wrapper{border-radius:100px;overflow:hidden}.elementor-67523 .elementor-element.elementor-element-bea41f0 .elementor-progress-wrapper .elementor-progress-bar{background-color:#ba0203}.elementor-67523 .elementor-element.elementor-element-bea41f0 .elementor-progress-wrapper{border-radius:100px;overflow:hidden}.elementor-67523 .elementor-element.elementor-element-2630098 .elementor-progress-wrapper .elementor-progress-bar{background-color:#ba0203}.elementor-67523 .elementor-element.elementor-element-2630098 .elementor-progress-wrapper{border-radius:100px;overflow:hidden}.elementor-67523 .elementor-element.elementor-element-2630098 .elementor-progress-bar{font-size:14px}.elementor-67523 .elementor-element.elementor-element-fdeffec{--spacer-size:10px}.elementor-67523 .elementor-element.elementor-element-c618c4a{--spacer-size:50px}.elementor-67523 .elementor-element.elementor-element-c229806{--divider-border-style:double;--divider-color:#8f0707;--divider-border-width:1px}.elementor-67523 .elementor-element.elementor-element-c229806 .elementor-divider-separator{width:100%}.elementor-67523 .elementor-element.elementor-element-c229806 .elementor-divider{padding-block-start:15px;padding-block-end:15px}.elementor-bc-flex-widget .elementor-67523 .elementor-element.elementor-element-0323795.elementor-column .elementor-widget-wrap{align-items:center}.elementor-67523 .elementor-element.elementor-element-0323795.elementor-column.elementor-element[data-element_type="column"]>.elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center}.elementor-67523 .elementor-element.elementor-element-8f74afd{text-align:center}.elementor-67523 .elementor-element.elementor-element-19c3818{column-gap:0}.elementor-67523 .elementor-element.elementor-element-76b3c87>.elementor-widget-container{margin:34px}.elementor-67523 .elementor-element.elementor-element-76b3c87 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-bottom:calc(50px/2)}.elementor-67523 .elementor-element.elementor-element-76b3c87 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-top:calc(50px/2)}.elementor-67523 .elementor-element.elementor-element-76b3c87 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-right:calc(50px/2);margin-left:calc(50px/2)}.elementor-67523 .elementor-element.elementor-element-76b3c87 .elementor-icon-list-items.elementor-inline-items{margin-right:calc(-50px/2);margin-left:calc(-50px/2)}body.rtl .elementor-67523 .elementor-element.elementor-element-76b3c87 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{left:calc(-50px/2)}body:not(.rtl) .elementor-67523 .elementor-element.elementor-element-76b3c87 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{right:calc(-50px/2)}.elementor-67523 .elementor-element.elementor-element-76b3c87 .elementor-icon-list-item:hover .elementor-icon-list-icon i{color:#ba0203}.elementor-67523 .elementor-element.elementor-element-76b3c87 .elementor-icon-list-item:hover .elementor-icon-list-icon svg{fill:#ba0203}.elementor-67523 .elementor-element.elementor-element-76b3c87 .elementor-icon-list-icon i{transition:color .3s}.elementor-67523 .elementor-element.elementor-element-76b3c87 .elementor-icon-list-icon svg{transition:fill .3s}.elementor-67523 .elementor-element.elementor-element-76b3c87{--e-icon-list-icon-size:30px;--e-icon-list-icon-align:center;--e-icon-list-icon-margin:0 calc(var(--e-icon-list-icon-size,1em)*0.125);--icon-vertical-offset:0px}.elementor-67523 .elementor-element.elementor-element-76b3c87 .elementor-icon-list-icon{padding-right:33px}.elementor-67523 .elementor-element.elementor-element-76b3c87 .elementor-icon-list-text{transition:color .3s}.elementor-67523 .elementor-element.elementor-element-1c1d964 .elementor-button{background-color:#ba0203;fill:#fff;color:#fff}<!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><style>body{font-size:12px}#origin{float:left;width:400px;height:300px;margin-right:16px;overflow:hidden;cursor:url(/wp-content/uploads/elementor/css/point.ico),auto}#origin img{display:none}#zoom{float:left;width:400px;height:300px;overflow:hidden;border:1px solid #ccc;display:none}#detail{float:left;width:400px;height:300px;overflow:hidden;border:1px solid #ccc}</style></head><body><div id="origin"><img src="big.jpg" id="srcImg"></div><div id="zoom"><img id="zoomImg"></div><div id="detail">详细说明</div><script type="text/javascript" src="jquery-1.2.6.js"></script><script type="text/javascript">$(document).ready(function(){//获取两个图片对象 var oImg=$('#srcImg');var nImg=$('#zoomImg');//获取原始图片的宽,高以及宽/高比 var oW=oImg.width();var oH=oImg.height();var bal=oW/oH;//获取图片展示区的宽度和高度 var originW=$('#origin').width();var originH=$('#origin').height();//获取将被缩小的系数zoomRate if(bal>=4/3 && oW>originW){//如果图片比较宽并且过界的话 var zoomRate=oW/originW;oImg.width(originW);oImg.height(originW/bal);oImg.show()}else if(oH>originH){//如果图片比较高并且过界 var zoomRate=oH/originH;oImg.height(originH);oImg.width(originH*bal);oImg.show()}else{oImg.show();$('#origin').css('cursor','default');return}//设置放大图片的url地址 nImg.attr('src',oImg.attr('src'));//获取原始图片的位置 var oPos=oImg.offset();var w=oImg.width()/zoomRate/2;var h=oImg.height()/zoomRate/2;oImg.bind('mouseover',function(){$('#detail').hide();$('#zoom').show()});oImg.bind('mouseout',function(){$('#detail').show();$('#zoom').hide()});oImg.bind('mousemove',function(event){var x=event.pageX - oPos.left;x=x<(oImg.width()-w)?x<w?w:x:oImg.width()-w;nImg.css('marginLeft',(w-x)*zoomRate);var y=event.pageY - oPos.top;y=y<(oImg.height()-h)?y<h?h:y:oImg.height()-h;nImg.css('marginTop',(h-y)*zoomRate)});});</script></body></html>