在客户部分 - 最左边的底部 2 个徽标不会翻转。但是相同的脚本，在网格中的不同位置将起作用。
我一直在绞尽脑汁。是响应式布局吗？这是调用它的开始 java。我还设置了预加载所有图像。
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
这部分是 HTML 网格。最后两行第一张图片不交换。我已经在 Google 中进行了测试，并且没有丢失图像链接的“错误”......
<!-- Clients -->
<section class="section-wrap clients bg-light" id="clients">
<div class="container">
<div class="row heading">
<div class="col-md-6 col-md-offset-3">
<h2 class="text-center bottom-line"><b>Clients</b></h2>
</div>
</div>
<div class="row" >
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="http://www.at60inches.com/" onMouseOver="MM_swapImage('@60','','img/C-60-over.png',1)" onMouseOut="MM_swapImgRestore()"><img src="img/C-60-up.png" width="150px" alt="@60" id="@60"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="http://andrewalkerhair.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Andre Walker','','img/C-ANDRE-over.png',1)"><img src="img/C-ANDRE-UP.png" alt="Andre Walker Hair" width="150px" id="Andre Walker"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="https://www.domainecarneros.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Domaine Carneros','','img/C-domaie-over.png',1)"><img src="img/C-domaine-up.png" alt="Domaine Carneros by Taittinger" width="150px" id="Domaine Carneros"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="http://www.tomford.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Tom Ford','','img/C-ford-over.png',1)"><img src="img/C-ford-UP.png" alt="Tom Ford" width="150px" id="Tom Ford"></a>
</center>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="http://goodwillnynj.org/about-us" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Goodwill','','img/C-Goodwill-over.png',1)"><img src="img/C-Goodwill-up.png" alt="Goodwill NYNJ" width="150px" id="Goodwill"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="http://simplygum.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Simply Gum','','img/C-gum-over.png',1)"><img src="img/C-gum-UP.png" alt="Simply Gum" width="150px" id="Simply Gum"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="http://www.hearst.com/about" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Hearst','','img/C-hearst-over.png',1)"><img src="img/C-hearst-up.png" alt="Hearst" width="150" id="Hearst"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="http://bobmackie.com/pages/bobs-bio" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Bob Mackie','','img/C-mackie-over.png',1)"><img src="img/C-mackie-up.png" alt="Bob Mackie" width="150" id="Bob Mackie"></a>
</center>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="http://erstwhilejewelry.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Erstwell','','img/C-erstwell-over.png',1)"><img src="img/C-erstwell-up.png" alt="Erstwell Jewelry" width="200" id="Erstwell"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="http://www.taittinger.fr/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Taittinger','','img/C-Taittinger-over.png',1)"><img src="img/C-Taittinger-UP.png" alt="Taittinger" width="150" id="Taittinger"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="https://www.youtube.com/watch?v=PRzh7hhsk84" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('WIE Network','','img/C-wie-over.png',1)"><img src="img/C-wie-up.png" alt="WIE Network" width="150" id="WIE Network"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="http://candicekumai.com/about" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Candice','','img/C-candice-over.png',1)"><img src="img/C-candice-up.png" alt="Candice Kumai" width="150" id="Candice"></a>
</center>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="https://www.delivery.com/info/about" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('com','','img/C-Delivery-over.png',1)">
<img src="img/C-Delivery-up.png" alt="Delivery.com" width="150" id="Delivery.com"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="http://kettlebellkickboxing.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Kettlebell Kickboxing','','img/C-kettle-over.png',1)"><img src="img/C-kettle-UP.png" alt="Kettlebell Kickboxing" width="150" id="Kettlebell Kickboxing"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="http://www.nelsonvercher.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Nelson','','img/C-nelson-over.png',1)"><img src="img/C-nelson-up.png" alt="Nelson Verner" width="150" id="Nelson"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3" style="padding-bottom:20px;">
<center>
<a href="https://www.mentedcosmetics.com/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Mented','','img/C-Mented-over.png',1)"><img src="img/C-Mented-up.png" alt="Mented" width="150" id="Mented"></a>
</center>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3">
<center>
<a href="http://shortyawards.com/socialgood" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Shorty Social Good Awards','','img/C-ShortyGood-over.png',1)"><img src="img/C-ShortyGood-up.png" alt="Shorty Social Good Awards" width="150" id="Shorty Social Good"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3">
<center>
<a href="https://www.youtube.com/watch?time_continue=1&v=lIKzgXJxBU8" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Shorty Awards','','img/C-shorty-over.png',1)"><img src="img/C-shorty-up.png" alt="Shorty Awards" width="150" id="Shorty Awards"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3">
<center>
<a href="http://waxclub.nyc/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Wax Club','','img/C-WaxClub-over.png',1)"><img src="img/C-WaxClub-up.png" alt="Wax Club" width="150" id="Wax Club"></a>
</center>
</div>
<div class="col-xs-6 col-sm-3"></div>
</div>
</div>