感想:主要学习了$(window).scroll()这个网页滚动事件。 回顾了$("html,body").scrollTop()获取获取网页偏移位的方法,其中IE下是body,其他是html
<!DOCTYPE html> <html lang="en"> <head> <style> *{ margin: 0; padding: 0; } .left{ width: 100px; height: 160px; float: left; position: fixed; left: 0; top: 200px; } .right{ width: 100px; height: 160px; float: right; position: fixed; right: 0; top: 200px; } img{ display: none; } </style> <meta charset="UTF-8"> <title>40-对联广告</title> <script src="JS_file/jquery-1.12.4.js"></script> <script> $(function () { // 监听网页的滚动 $(window).scroll(function () { //1.1获取网页滚动的偏移位 var offset=$("html,body").scrollTop() // 1.2判断网页是否滚到到了指定的位置 if(offset>=500) { // 1.3显示广告 $("img").show(1000); } else { $("img").hide(1000); } }) }) </script> </head> <body> <img src="images/left_ad.jpg" class="left"> <img src="images/right_ad.jpg" class="right"> <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> <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> </body> </html>
