【HTML插件】帮你100%还原设计

设计狮们还在纠结重构还原到位了吗？U工们还在锻炼像素眼吗？来试试这款设计还原检查插件吧！

还原对比效果图

# 这是什么

Contrast.js插件主要用于检验移动端Web重构还原度，由于大部分设计稿是基于iPhone6以上（1334 x 750）设计的，所以该插件比较适合用iPhone6、iPhone7、iPhone8检查设计还原情况。

# 引入插件

    1. 准备好需要验证的设计稿，如bg.png

    2. 在重构稿中引入工具脚本contrast.js并设置图片路径

<script type="text/javascript" src="https://coderjunb.github.io/HTML-contrast/dist/contrast.js"></script>
<script type="text/javascript">
    Contrast.setBg({src:"img/bg.png"});
</script>    

3. 浏览页面，可以看到界面右下角多了个“对比工具”按钮

# 操作使用

    开启工具：点击“工具按钮”，插件展示操作引导（第一次加载才显示引导）；

    关闭工具：点击“工具按钮”，插件隐藏；

    查看设计稿：在屏幕上半区向右滑动，左侧展示设计稿，右侧展示重构稿；

    设计稿透明度：在屏幕下半区向左滑动，设计稿逐渐透明；在屏幕下半区向右滑动，设计稿逐渐不透明；

    调整工具位置：拖拽“工具按钮”到要调整到位置；

    更换设计稿：长按“工具按钮”，选择相册，即可；

# 其他问题

    有没有设计稿背景规格？

    答：不限制规格，推荐宽750px的设计标准。

    会不会影响正常开发和上线？

    答：插件适用于检查还原度，上线时注释引用即可，不影响正常开发和上线。

设计稿有TitleBar，页面没有，该怎么办？

    答：在setBg的时候设置隐藏TitleBar，如下：

// 通过设置hideBar隐藏设计稿任务栏
Contrast.setBg({
    src:"bg.png",
    hideBar:true
});     

# 项目链接

https://github.com/coderjunb/Contrast