web前端使用jq实现对联广告功能
实现效果：
功能：当滚动条滚在中间时，窗口两边出现图片，可以用于广告图片的出现
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Couplet_Ad</title>
<style>
* {
margin: 0;
padding: 0;
}
.l{
float: left;
position: fixed;
top:200px;
left: 0px;
display: none;
}
.r{
float: right;
position: fixed;
top:200px;
right: 0px;
display: none;
}
img {
width: 150px;
height: 300px;
}
</style>
<script src="./lib/jquery-1.11.3/jquery-1.11.3/jquery.min.js"> </script>
<script>
$(function(){
$(window).scroll(function(){
var offset=$("html,body").scrollTop();
if(offset>=450){
$("img").show(1000);
}
else{
$("img").hide(1000);
}
});
});
</script>
</head>
<body>
<img src="./img/左.jpg" alt="" class="l">
<img src="./img/右.jpg" alt="" class="r">
<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><br><br><br><br><br><br><br><br><br><br>
</body>
</html>