web前端使用jq实现对联广告功能
2021-04-10 18:26
标签：cal UNC mamicode title color content 图片 query splay 实现效果： web前端使用jq实现对联广告功能 标签：cal UNC mamicode title color content 图片 query splay 原文地址：https://www.cnblogs.com/lsl30522/p/12425823.html
功能：当滚动条滚在中间时，窗口两边出现图片，可以用于广告图片的出现
实现代码：
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_Adtitle>
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>