摘要：
宝贝放大镜特效在之前也做过，但一直没有注意到substr在ie8以下版本的浏览器中会取值异常。原来使用规完整的写法后才能兼容低版本浏览器......

上周我们的美工对公司网站部分地方进行了改版，然后引用了一个新的特效。到底是啥特效呢，就是：宝贝放大镜特效。如果看官不容易理解的话，可以回忆下淘宝详情页的主图特效。算了，还是来一张图吧。效果图：(ps:如果看官需要实际体验，请戳我戳我)

特效啥的那都不是事儿，只要有思路后，一切都可迎刃而解，剩下的就是考虑兼容性问题了。这不，在坑爹的低版本ie浏览器中就出现了问题。

我们还是先来分析下这个效果吧，毕竟总有些好学的看官想装逼。

一、效果分析

该特效共分为四块：
第一块：当鼠标滑过主图时，主图自身放大；
第二块：与此同时，右侧缩略图需要显示出来；
第三块：鼠标滑过右侧缩略图时，左侧主图跟随变化；
第四块：当缩略图超过4个时，显示翻页按钮，点击后可切换缩略图。

对于上面的划分，前两块儿都可以直接用css来实现。
第一块儿的放大功能，可以使用css3中的scale完成。
第二块儿实际上是先隐藏右侧缩略图区域，当鼠标滑过的时候就显示出来而已。记得巧用:hover即可解决问题。
像第三块儿、第四块儿这样有交互效果的，虽然说依然可以利用强大的css3来完成，但考虑到此页面代码量太过庞大，所以还是采用js比较合适些。下面就来开展下这个动态修改src属性的话题。

二、动态更新src路径思路分析

对于有点jquery基础的看官来说，这都不是事儿。鼠标滑过小图的时候，获取src，然后再传递给大图即可。当然，这是最简单的一种方法。但很多时候，我们的小图和大图的src是不同的！所以这个时候我们要多绕几步，通过字符串截取来拼接出大图的src路径。

难道字符串截取还有坑？？？

三、字符串截取后拼接新的src思路

说到字符串截取，看官应该能想到：substr、substring、slice、indexOf等相关的函数。
艺灵先前使用了indexOf+substr+substring这三个函数进行组合使用后拼接出了大图的路径。相关源码见下方。

3.1、核心代码

/*示例小图src：http://www.wowobao.com/public/attachment/201612/12/16/584e5dbb8e020_83x81.jpg*/
/*获取小图src*/
$src=$(this).attr('src');
/*计算_的位置*/
var st0=$src.indexOf('_')+1,
/*截取后四位，即图片后缀*/
st1=$src.substr(-4),
/*截取_前的路径*/
st2=$src.substring(0,st0),
/*拼接最终大图路径*/
st3=st2+w+'x'+h+st1;

说明一下：上面代码中黄色高亮部分是我们需要处理的，通过修改尺寸可显示大图、中图以及缩略小图。

使用上面的代码后，我们如期实现了想要的：鼠标滑过小图时，大图自动更新src路径的功能。但很不幸的是：上面的代码在ie8以下版本中不支持！

四、substr是个坑！

经过几个alert弹窗调试后，最终找到了问题。原来substr在ie8以下浏览器中获取不到值！配图一张：如果看官需要亲身体验下这个小坑，可以点击下面的demo进入测试页面。戳我戳我戳我呀！

既然substr(-4)存在兼容性问题，那就修改下呗。例如使用完整写法：st1=$src.substr($src.length-4,$src.length)，这样就获取到了小图的后缀了。

五、最后

看来有些时候，省参数在低版本浏览器中是会出现问题的。以后再写代码时，还是老老实实写全为上。

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2016-12-14/469.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。