比如:background-position: 50% 50%,浏览器计算x y偏移量算法分别为:
x: (容器宽度 - 图片宽度) * 50%;
y: (容器高度 - 图片高度) * 50%;
但是我需要的一个需求是:设置了background-position: 30% 0 之后,就将图片相对于容器偏移30% * 图片的宽度(也就是将图片向左移动30%长度):所以我得出了下面的方程式:
注:
x1:容器宽度
x2: 图片宽度
-x2 * 30% = (x1 - x2) * 30% * ? //(这里的百分数都是相对于图片的宽度)
(说明:30%的需求是模拟实现图片裁切,将一张图片作为div的背景,在div中再用6个div显示这一张图片,以实现图片百叶窗的效果)
通过设置未知量可以求的这个因子的值。设图片宽度为1,得到?的值为
? = 1 / (1 - x1') // x1'为容器占图片宽度的比例
最后只需要设置background-position:"30*(1/(1-x1'))% 0"
就可以实现图片偏移30%的效果,而且还是自适应的。
下面是我项目中的关于该算法的核心代码实现:
renderAreasUI : function() { //根据准备的数据构建区域ui var container = $(this.settings.preImg).parent().find(this.settings.ui); var num = this.settings.num; var newImgSrc = $(this.settings.newImg).attr('src'); var position = 0; var distance = 100 / num; //容器宽度所占图片宽度比例 for(var i = 0; i < num; i++) { //创建num个div分区域显示这一张图片 position = (i*distance)*(1/(1 - (distance / 100))) + '%' + ' ' + '0'; var area = document.createElement('div'); $(area).addClass(this.settings.area.substring(1)); $(area).css({ position: 'absolute', top: 0, left: (i*distance) + '%', backgroundImage: 'url(' + newImgSrc + ')', backgroundRepeat: 'no-repeat no-repeat', display: 'block', backgroundPosition: position, backgroundSize: (100 * num) + '% 100%', //设置图片宽度为当前容器的num倍,目的是为了让每一个div都显示一部分 height: '100%', width: distance + '%' //这里通过num设置百分比,创建num个div显示这一张图片 }); $(container).append($(area)); } }