用jQuery实现大背景图的居中


封装函数写法:
用当前函数调用一个元素赋值给banner
var banner = document.querySelector(".banner");
//当窗口大小发生变化时,调用这个函数
window.onresize = function(){
//用当前函数获取视口的宽度
var viewwidth = document.documentElement.clientWidth;
//封装的函数值
move(banner,1920,1000,viewwidth);
}


封装的函数
定义一个函数,函数里的值分别是什么
function move(hanshuming,yuantuwidth,minwidth,viewwidth){
//如果视口宽度小于最小值,跳出
if (viewwidth < minwidth) {
return;
}
//原图宽度减去视口宽度除以2赋值给panduanwidth
var panduanwidth = (yuantuwidth-viewwidth)/2;
//图片x轴的样式偏移的大小
hanshuming.style.backgroundPositionX = -panduanwidth + "px";
}

posted @ 2018-05-31 18:44  猪小雪  阅读(185)  评论(0编辑  收藏  举报