制作html界面:登陆页按照窗口缩放等比缩放目标标签

本此实现效果,主要是按照浏览器窗口减小增大,来改变背景图的高度,主要控件是采用layui的控件实现的

本此实现效果是这样的:

页面缩放之后是这样的:

主要用到的方法是,浏览器窗口变化监听,以及jq设置高度属性

$(window).resize(function() {});

$('#byMark').css('height', height + 'px');

//这里才是重点,因为文档开始渲染时是获取不到宽高的,这时候只能通过延时的方式来解决(毕竟人眼是可欺骗的,qaq)       
 var widthBiao = window.screen.width;
//为什么这里延迟就能获取到元素宽度,就是因为计时器是文档渲染到完成之后才开始工作的,
			setTimeout(function(){
				var bili=$('#byMark').width() / widthBiao;
				var height = bili * 680;
				var heightBili=height-40*bili;
				$('#byMark').css('height', height + 'px');
				$('#iv_logo').css('height', heightBili + 'px');
			},10);
			$(window).resize(function() {
				var bili=$('#byMark').width() / widthBiao;
				var height = bili * 680;
				var heightBili=height-40*bili;
				$('#byMark').css('height', height + 'px');
                //这里是下方的一些说明链接,会跟着一起向上移动
				$('#iv_logo').css('height', heightBili + 'px');
			});
发布了58 篇原创文章 · 获赞 10 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_34203714/article/details/89643967