如何在前端实现切图操作?
来源:广州中睿信息技术有限公司
发布时间:2012/10/21 23:25:16 编辑:itlead 阅读 2098

  前端的三样基础,HTML,CSS,JS。

  一般前端切图是基础,给你一张软件设计图,不会给你太多时间切图,切出来的网页要兼容各个主流浏览器。

  前端大部分的时间是在JS上面。你说的ajax也是js技术的一种。以及一些数据交互,表单验证等,很多都是用JS。

  所以切图是基础,一定要熟练,其他要花更多的时间去钻研JS,如何去在前端切图,具体操作如下:

  第一步 拼图

         1.jpg

  为了加快页面加载速度,会把多张图片拼在一张图片上。



  第二步 保存为Web所用格式

  网页上的图片,照片、banner类一般保存为jpg,其他的,通常都是保存为png-8或gif(除了动态图片需要用到gif,其他场景png-8完全可以替代gif)。对于保存为png-8或者gif的图片,有时候会看到图片呈现带状感(如下图右侧),失真很严重。

         2.jpg

  有两个办法,一是增加颜色的数量,但是增加数量会导致图片变大,需要在颜色数量和图片大小之间取一个平衡,而且如果图片上颜色太多,就算颜色数量增到最大256,依旧会有明显的带状感,这时候可以把图片拆开,把颜色类似的图片拼在一张图上。