侧边横幅特效 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         *{margin: 0;padding: 0;list-style: none;border:none}
  8         #aside{width: 150px;position: absolute;left: 0;top: 150px;}
  9         #aside img{width: 100%;}
 10         p{height: 50px;text-align: center;font-size: 20px;}
 11     </style>
 12 </head>
 13 <body>
 14     <div id="aside">
 15         <img src="images/float.jpg" alt="">
 16     </div>
 17    <div>
 18        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 19        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 20        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 21        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 22        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 23        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 24        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 25        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 26        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 27        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 28        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 29        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 30        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 31        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 32        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 33        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 34        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 35        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 36        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 37        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 38        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 39        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 40        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 41        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 42        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 43        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 44        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 45        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 46        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 47        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 48        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 49        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 50        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 51        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 52        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 53        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 54        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 55        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 56        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 57        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 58        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 59        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 60        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 61        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 62        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 63        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 64        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 65        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 66        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 67        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 68        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 69        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 70        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 71        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 72        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 73        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 74        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 75        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 76        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 77        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 78        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 79        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 80        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 81        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 82        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 83        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 84        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 85        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 86        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 87        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 88        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 89        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 90        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 91        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 92        <p>上课要好好听课!下课要好好复习!不要打游戏!</p>
 93    </div>
 94 
 95 <script src="js/myFunc.js"></script>
 96 <script>
 97     window.onload = function () {
 98         // 1. 获取广告头部的高度  距离上部的高度
 99         var offset_top = $('aside').offsetTop;
100 
101         // 2. 监听窗口的滚动
102         var begin = 0, end = 0, timer = null;
103         window.onscroll = function () {
104             // 2.0 清除定时器
105             clearInterval(timer);
106 
107             // 2.1 获取滚动的高度  scroll自己封装的方法  获取滚动的高度
108             var scroll_top = scroll().top;
109             end = offset_top + scroll_top;
110 
111             // 2.2 缓动动画
112             timer = setInterval(function () {
113                  begin = begin + (end - begin) * 0.2;
114                  $("aside").style.top = begin + "px";
115 
116                 console.log(begin, end);
117                 // 清除定时器
118                 if(Math.round(begin) === end){
119                     clearInterval(timer);
120                 }
121 
122             }, 20);
123         }
124     }
125 </script>
126 </body>
127 </html>

 

posted @ 2019-07-18 23:22  疏影横斜水清浅  阅读(184)  评论(0)    收藏  举报