随⿏标滚动的⼴告图⽚JavaScript
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>随⿏标滚动的⼴告图⽚</title>
<style type="text/css">
#main {
text-align: center;
width: 1014px;
margin: 0 auto;
}
#adver {
position: absolute;
/* position:fixed; */
left: 10px;
top: 30px;
z-index: 2;
html如何设置图片滚动
}
</style>
</head>
<body>
<div id="adver"><img src="images/adv.jpg" alt=""/></div>
<div id="main"><img src="images/main1.JPG" alt=""/><img src="images/main2.JPG" alt=""/><img src="images/main3.JPG" alt=""/></div> </body>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function (){
//获取id的⾼度⽤parseInt（）去px
let top = parseInt($("#adver").css("top"));
let left = parseInt($("#adver").css("left"));
$(window).scroll(function (){
//获取样式的元素中滚动条的垂直偏移：scrollTop()
let scrollTop=parseInt($(this).scrollTop())
//获取样式的元素中滚动条的左偏移：scrollTop()
let scrollLeft=parseInt($(this).scrollLeft())
console.log("滚动条距离最顶部的距离"+scrollTop)
console.log("滚动条距离最左侧的距离"+scrollLeft)
//offset：规定以像素计的 top 和 left 坐标。
$("#adver").offset({top:top+scrollTop})
$("#adver").offset({left:left+scrollLeft})
})
})
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。