茶庄网站模板,凡科的模板做网站,wordpress主题图片路径,山东建设工程招标网官方网站让你显示一个天气图标你会怎么显示呢#xff1f;让你做一个简单的动图你会怎么采用什么方式呢#xff1f;让你输出一个长期固定的图标列表你会怎么编写代码呢#xff1f;如果不管性能#xff0c;不用css#xff0c;不用js#xff0c;可能你会这么写html#xff1a;类…让你显示一个天气图标你会怎么显示呢让你做一个简单的动图你会怎么采用什么方式呢让你输出一个长期固定的图标列表你会怎么编写代码呢如果不管性能不用css不用js可能你会这么写html类似这样便是最原始的图片序列编写方式。然而即使有emmet加持这种编写仍然费功夫而且浏览器的请求次数变多网页更容易延迟。而使用精灵图的方法则可以更高效解决上述问题。介绍一下精灵图就是把多张小图片拼接成一张大图片通过定位设置XY轴坐标的值并让超出部分隐藏这样就可以显示图片的局部也就是我们想要的部分这样做有利于页面优化当页面加载时不是加载每个单独图片而是一次加载整个组合图片。它大大减少了HTTP请求的次数减轻服务器压力同时缩短了悬停加载图片所需要的时间延迟使效果更流畅不会停顿。所以对于小图标列表表单来说精灵图是一个是十分舒服的一种方式。用css 定义一个4排的图标阵列。CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中再利用 CSS 的“background-image”“background- repeat”“background-position”的组合进行背景定位一堆图标只用请求一次。background-position 可以用数字精确的定位出背景图片的位置。网络上的精灵图然后通过JavaScript改变不同不同位置的显示就有点像放着一个相框和一个背景然后每移动一次背景在相框中可以看到不同的图像。JavaScript编写如下通过循环改变图片显示的不同坐标起到了“移动背景布”的作用。最后输出结果类似这样CSS Sprites 看上去十分愉快同上面的html简单方法显示一样能很好地减少网页的http请求从而大大的提高页面的性能而代码也简洁大方。而比如天气图标也可以这样修改。让精灵图包括晴雨雪等图标然后当传入天气信息时便可以改变。还有rpg游戏中的人物移动时的图片变换都可以使用这种办法。关键词htmlcssjs 精灵图
