<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 4000px;
4000px;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
//当页面加载的时候
$(window).load(function () {
//获取页面的宽度
var pageWidth = $(window).width();
//获取页面的高度
var pageHeight = $(window).height();
//获取图片的宽度
var picWidth = $("img").width();
//获取图片的高度
var picHeight = $("img").height();
//计算top值
// 页面的高度的一半 - 图片高度的一半
var top = (pageHeight-picHeight)/2;
//计算left值
// 页面宽度的一半 - 图片宽度的一半
var left = (pageWidth-picWidth)/2;
//设置图片的位置
$("img").offset({
"top":top,
"left":left
});
$(document).scroll(function(){
var scrollleft=$(this).scrollLeft();
var scrolltop=$(this).scrollTop();
$("img").offset({
"top":top+scrolltop,
"left":left+scrollleft
})
});
// $(document).scroll(function () {
// var scrollTop = $(this).scrollTop();
// var scroolLeft = $(this).scrollLeft();
//
// $("img").offset({
// "top":top+scrollTop,
// "left":left+scroolLeft
// });
// });
})
</script>
</head>
<body>
<img src="01.jpg" alt="" width="200">
</body>
</html>