<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>关爱孩子-眼睛健康</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
background-image: url(‘./images/222.png‘);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
.menu{
position: fixed;
top:85%;
}
.menu img {
width: 225px;
}
</style>
</head>
<body>
<div class="container">
<div class="menu">
<img src="./images/1.png" />
<img src="./images/2.png" />
<img src="./images/3.png" />
<img src="./images/4.png" />
</div>
</div>
</body>
<script src="./jquery.min.js"></script>
<script>
$(function(){
//获取可视界面的高度
var clientHeight = document.documentElement.clientHeight;
//获取可视界面的宽度
var clientWidth = document.documentElement.clientWidth;
$(‘.container‘).css(‘height‘,clientHeight);
$(‘.container‘).css(‘width‘,clientWidth);
// 获取图片集群宽度
var imgWidth = $(‘.menu‘).width();
// 图片集群占比
var mix = 1 -( imgWidth/clientWidth );
// 获取偏移量
var offset = mix/2;
// 获取偏移百分比
var offsetPre = Math.round(offset *100);
// 设置
$(‘.menu‘).css(‘left‘,offsetPre+‘%‘);
});</script>
</html>
原文：https://www.cnblogs.com/blog-zy/p/10823989.html