实现效果：
功能：当滚动条滚在中间时，窗口两边出现图片，可以用于广告图片的出现
实现代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Couplet_Ad</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 }
12 .l{
13 float: left;
14 position: fixed;
15 top:200px;
16 left: 0px;
17 display: none;
18 }
19 .r{
20 float: right;
21 position: fixed;
22 top:200px;
23 right: 0px;
24 display: none;
25 }
26 img {
27 width: 150px;
28 height: 300px;
29 }
30 </style>
31 <script src="./lib/jquery-1.11.3/jquery-1.11.3/jquery.min.js"> </script>
32 <script>
33 $(function(){
34 $(window).scroll(function(){
35 var offset=$("html,body").scrollTop();
36 if(offset>=450){
37 $("img").show(1000);
38 }
39 else{
40 $("img").hide(1000);
41 }
42 });
43 });
44 </script>
45 </head>
46 <body>
47 <img src="./img/左.jpg" alt="" class="l">
48 <img src="./img/右.jpg" alt="" class="r">
49
50 <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>
51 <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>
52 <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>
53 </body>
54 </html>
原文地址：https://www.cnblogs.com/lsl30522/p/12425823.html
时间： 2024-11-04 04:45:16