js实现图片上下滚动background-position

最新推荐文章于 2022-11-17 12:02:17 发布

初晨未凉

最新推荐文章于 2022-11-17 12:02:17 发布

阅读量2k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45638909/article/details/108930517

版权

笔记专栏收录该内容

59 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<style>
			* {
				margin: 0;
			}
			.a{
				background: pink;
				width: 100%;
				height: 1000px;
				
			}
			.b{
				background: url("images/未标题-1.jpg") no-repeat;
				background-position: 0px 0px;
				width: 100%;
				height: 420px;
				background-attachment: fixed;
				background-size: 100%;
				
			}
			.c{
				background: #FF5B77;
				width: 100%;
				height: 500px;
				
			}
		</style>
	</head>
	<body>
		<div class="a"></div>
		<div class="b">
		</div>
		<div class="c"></div>
	</body>
	<script>
		(function(){
			var b = document.getElementsByClassName("b")[0];
			//获取顶点到b的高度
			var bof = b.offsetTop;//1000
			window.onscroll = function(){
				//获取滚动的高度
				var scHeight = document.documentElement.scrollTop;
				console.log(bof - scHeight);
				b.style.backgroundPositionY = (bof - scHeight)*0.5 +"px";
			}
		})();
	</script>
</html>

初晨未凉

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
js实现图片上下滚动background-position

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <style> * { margin: 0; } .a{ backgrou
复制链接

扫一扫