Welcome, Old Sport!

网页前端“洋葱皮”工具js插件Webmirror

by ilikecss ON 2014/09/17 3470

网页前端“洋葱皮”工具js插件Webmirror“洋葱皮”工具是指制作Flash动画同时显示或编辑多个帧的内容时便于准确定位使每帧完全重合而起的特殊名词。 我知道国内大多做设计的朋友设计时不会添加red-line(设计稿无差别辅助线), 能帮助开发者更好的定位code和实际设计稿的距离(PX)。 大多会使用一些辅助工具去量设计稿,不是很方便。基于公司对作品严格要求,@Tracy童鞋开发了一款能够帮助coder快速匹配设计稿的javascript插件,这样我们可以边”扣”边比对设计稿,让作品贴近设计,更具竞争力!

网页前端洋葱皮工具photoshop中的例子

使用方法(usage):

  1. “Alt” key + mousewheel scrolldown: “Alt” + 鼠标向下滚动提高透明度
  2. “Alt” key + mousewheel scrollup: “Alt” + 鼠标向上滚动减少透明度
  3. Drag design image or “Alt” key + Up/Right/Down/Left key: 可拖拽设计图片或者”Alt” + 键盘上下左右调整位置
  4. Double click the design layer: 双击”显示/隐藏”设计稿

加载“webmirror.js”和jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="http://webmirror.tracylv.com/webmirror.js" ></script>

初始化设置:


var webmirror_defaults = 
{
    // 透明度初始值
    opacity: 0.1,

    // 宽度设置
    width: "100%",

    // 高度设置: "-1 or < =0" 表示和body尺寸相同,请根据设计稿情况自己调整高度
    height: -1,

    // 设计稿初始位置
    offset: { top: 0, left: 0},

    // 设计稿读取地址
    imgpath : "design.jpg"
};
$.webmirror_options = {};
// 也可以直接调用 $.webmirror_options = {"imgpath" : "design/xxx.jpg", width: xxx, height: xxx};

注意事项:

  1. 请不要禁止cookie, 因为利用cookie来记录当前设置以免重复调整
  2. 完成工作后请把“webmirror.js”从你的页面中移除

一些小问题:

  1. 在IE浏览器下将设计稿尺寸调整到出现滚动条时,滚动滚轴会自动调整透明度
  2. 在Chrome浏览器本地测试无法记录Cookie(“file:///C:/Users/xxx”), 请使用IIS配置一个本地环境后测试

下载和了解更多: https://github.com/tracylv/webmirror

5条评论
  1. #1

    Tracy说道:

    谢谢版主帮我扩散, 自己怒赞一个, 哈哈。。。

  2. #2

    LovePanda说道:

    這太讚了,好棒的想法!這樣比對高子時更加精準了
    謝謝版主分享

  3. #3

    好基地说道:

    为什么演示地址错了?




TOP