侧边横幅特效
Posted zhangzhengyang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了侧边横幅特效相关的知识，希望对你有一定的参考价值。
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 #asidewidth: 150px;position: absolute;left: 0;top: 150px; 9 #aside imgwidth: 100%; 10 pheight: 50px;text-align: center;font-size: 20px; 11 </style> 12 </head> 13 <body> 14 <div id="aside"> 15 <img src="images/float.jpg" > 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>
以上是关于侧边横幅特效的主要内容，如果未能解决你的问题，请参考以下文章