前言：
今天各位老铁们对“js滚动自动加载”大体比较讲究，兄弟们都想要剖析一些“js滚动自动加载”的相关内容。那么小编也在网上汇集了一些关于“js滚动自动加载””的相关资讯，希望你们能喜欢，姐妹们一起来学习一下吧！<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>40 jquery 对联广告</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left{ /*左面图片样式*/
float: left; /* 左浮动*/
position: fixed; /* 固定定位方式*/
left: 0; /*左边距0*/
top: 200px; /* 上边距 200像素 */
}
.right{ /* 右面图片样式*/
float: right; /* 右浮动*/
position: fixed; /* 固定定位方式 */
right: 0; /* 右边距 0*/
top: 200px; /* 上边距 200像素*/
}
img{ /* 图片样式*/
display: none; /*显示方式 ： 隐藏*/
}
</style>
<script src="../static/js/jquery-3.6.0.js"></script>
<script>
$(function(){
// 监听网页的滚动
$(window).scroll(function(){
var $top = $("html,body").scrollTop() // 获取滚动条的偏移量
// console.log($top) // 打印滚动条的偏移量
if($top > 500){ // 如果偏移量大于500
$("img").show(2000) // 图片就用2秒钟的时间用动画的方式展示
}else{ // 否则
$("img").hide(2000) // 图片就用2秒钟的时间用动画的方式隐藏
}
})
})
</script>
</head>
<body>
<img src="../static/image/小花左.jpg" width="200px" height="300px" class="left"> <!--引入左面小花的图片 宽：200像素 高：300像素 -->
<img src="../static/image/小狗.jpg" width="200px" height="300px" class="right"> <!-- 引入右面小狗的图片 宽：200像素 高：300像素 -->
<br>
<br> <!-- 这么多的br换行符是为了页面出现滚动条 -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><!-- 这么多的br换行符是为了页面出现滚动条 -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><!-- 这么多的br换行符是为了页面出现滚动条 -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><!-- 这么多的br换行符是为了页面出现滚动条 -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><!-- 这么多的br换行符是为了页面出现滚动条 -->
<br>
<br>
<br>
</body>
</html>
标签： #js滚动自动加载 #对联 广告 #jquery悬浮广告 #jquery淘宝广告 #滚动广告html
