本文介绍了一种使用JavaScript实现的技巧，当页面滚动时，可以使指定的图片保持在视窗的固定位置。通过监听滚动事件并调整图片的top属性，实现了图片随滚动条的移动而移动的效果。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script language="JavaScript">
/**
* 拉动滚动条 图片位置固定不变
*/
function test(){
var img1 = document.images[0];
var img2 = document.images[1];
var s = document.documentElement.scrollTop; //上下滚动值
img1.style.pixelTop=s+300;
img2.style.pixelTop=s+300;
}
window.onscroll=test;
</script>
</head>
<body style="height: 1280px">
<img src="image/d.jpg" style="width: 150px;height: 300px;position: absolute; top: 280px;left: 0px" id="img1">
<img src="image/d.jpg" style="width: 150px;height: 300px;position: absolute; top: 280px;right: 0px" id="img2">
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
