首页 > 文章资讯 > 站长教程 > 建站知识 > jQuery 实时修改banner显示图的高宽比例

jQuery 实时修改banner显示图的高宽比例

时间：2024年01月16日

来源：网络

编辑：佚名

最近在将pc端修改为响应式的模版时，遇到了点问题。
pc端的幻灯片，他们并不是用img标签来直接显示的，而是用了一个li标签，然后给li标签设置了背景图。
并给背景图设置了固定的高度。
于是我发现这个幻灯片想要通过写css来控制高度还不如直接用js来控制。
function setFlashHeight() {
if ($(window).width() < 1200) {
var screenWidth = $(window).width();
var newHeight = (screenWidth / 1920) * 500;
$('.flash, .flash .flexslider, .flash .flexslider .slides li').css('height', newHeight + 'px');
} else {
$('.flash, .flash .flexslider, .flash .flexslider .slides li').css('height', '');
}
}
$(document).ready(function() {
setFlashHeight();
});
$(window).resize(function() {
setFlashHeight();
});
该代码定义了一个setFlashHeight()函数来设置.flash、.flash .flexslider和.flash .flexslider .slides li元素的高度。在$(document).ready()函数中，它会首先调用此函数来进行一次初始验证。然后，使用$(window).resize()函数来监听窗口大小的改变，并在每次改变时再次调用此函数。
这样，当页面加载完成时，会自动执行一次初始验证，以确保初始状态下元素的高度正确。在窗口大小改变时，也会自动应用相应的高度。
使用的时候，只需将需要调整高度的盒子比例，同时修改需要变化的盒子高度即可。

新闻资讯更多

猜你需要