淘宝设计师小工具合集[Web]

老鼠做淘宝设计也好久好久了，他们说这叫做“狼狼二狗”？不管了，反正日常工作中总有些繁琐的东西让人处理起来不胜其烦，于是就写了些小工具来做这些事情，这不最近的空把他们整理在一起了，现在拿出来分享给大家。@Appinn

淘宝设计师小工具合集[Web] 1

也没啥很大型或者很正经的功能，都是一些取代很繁琐的小工作的工具，比如换链接啊什么的，反正做淘宝设计的都懂的，动不动换几十个链接是家常便饭，在代码里找倒也不是很难，就是很烦。当然了，更可怕的是有一些代码小白的设计童鞋要操作这些繁琐的代码“工程”，更是欲哭无泪。所以这时候我就会写个小工具解救我和身边的小白们，他不痛苦了，我也不用一遍遍的重复着琐碎的教程了。

因为是自用的东西，所以很多体验上的东西我会省略掉，比如填写的数据我都没有进行验证，但是因此也产生了一些有趣的副功能，这一切都需要你的探索。

然后简单的介绍一下各个工具：

1. 弹出层代码生成：这个本来有很多参数的，不过我只做了一部分的自定义设置，默认左上角对齐（兼容最好），无偏移。什么，听不懂？那你当作鼠标滑过图片翻转的效果用就行了，这种情况保持两张图片大小一致效果比较好；

2. 宽屏海报代码生成：就是大通栏，反正就是突破淘宝的默认宽度限制，首页有效。默认宽度 1920px ，反正我只用这个宽度；

3. 宽屏轮播代码：跟上边的功能差不多，但是是轮播形式；

4. 商品格子代码生成器：这是给那些连建立表格都头疼的小白用的，其实蛮简单，N 张图片往里一填写就出来表格，嗯嗯，该注意什么你自己猜。反正图片做的规范真的挺好用；

5. 布局计算器：其实不是计算器，就是很直观的把一些常用辅助线尺寸整理了一下，默认 1920px 宽度布局；

6 链接地址提取工具：有的时候拿到别人的代码，想知道那几十张图片链接到了哪里，然后要把他们放到自己的设计中，难道要一个个复制粘贴？这个可以把代码中所有链接的地址提取出来。当然要是对方代码不规范也可能挺坑的，记得校对一下好了；

7. 链接地址批量添加工具： 往自己的代码中批量添加链接，对于切片代码挺好用的，但是要注意顺序，否则效果就很呵呵了。

8. 淘宝图片空间图片地址提取器：这个功能……你在淘宝图片空间后台用 Chrome 浏览器的“审核元素”查看代码，然后把代码复制出来（全部代码，或者只是在

9. 切片图片批量替换工具：跟上边的工具联合用效果超群，可以把上面的图片地址自动替换进 Photoshop 切片后生成的代码中。

10. 汉字转拼音工具：顾名思义你也知道是做什么的了，支持多音字选择，另外带一个心口不一的小工具，就是这样：小（huān）众（yíng）软（dà）件（jiā）。