用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";
}

转载于:https://www.cnblogs.com/huyaxue/p/9118344.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值