用javascript实现大背景图的居中

Posted 2020-11-09 huyaxue

//获取原图的宽度
var yuantuwidth = 1920;
//获取当前的一个元素
var dom = document.querySelector(".banner");
//当窗口大小发生变化时调用的函数
window.onresize = function(){
//用当前的函数获取视口的宽度
var viewwidth = document.documentElement.clientWidth;
//如果视口宽度小于1000时，跳出这个循环
if (viewwidth < 1000) {
return;
}
//计算图片中心需要的偏移量
var panduanwidth = (1920-viewwidth)/2;
//图片x轴的样式偏移的大小
dom.style.backgroundPositionX = -panduanwidth + "px";
}