码迷,mamicode.com
首页 > Web开发 > 详细

web前端使用jq实现对联广告功能

时间:2020-03-06 12:46:28      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:cal   UNC   mamicode   title   color   content   图片   query   splay   

实现效果:

技术图片

 

功能:当滚动条滚在中间时,窗口两边出现图片,可以用于广告图片的出现

实现代码:

 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>

 

web前端使用jq实现对联广告功能

标签:cal   UNC   mamicode   title   color   content   图片   query   splay   

原文地址:https://www.cnblogs.com/lsl30522/p/12425823.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!