jquery实现滑动滚动条出现对联广告

2024-04-20 用户投稿学习笔记 11阅读

jquery实现滑动滚动条出现对联广告

在很多网站都又滑动滚动条到一定位置，然后就出现对联广告的应用。今天我也学习了一个对联广告分享给大家效果图入下：

主要实现是用Jquery里面的scroll（）去获取滚动条的数值，然后判断一下数值大小，超过数值了就调用一下show（）方法。消失就用一下hide()方法。具体实现入下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> *{ margin: 0; padding:0; height:auto; } .left{ position: fixed; float: left; left: 0px; top: 200px; } .right{ position: fixed; float: right; right: 0px; top: 200px; } img{ display: none; } </style> <script > $(function(){ $(window).scroll(function(){ var offset= $("body").scrollTop() console.log($("html,body").scrollTop()) if(offset>=100){ $("img").show(1000) }else{ $("img").hide(1000) } }) }) </script></head><body> <img src="./img/1.jpg" class="left"><img src="./img/1.jpg" class="right"></body></html>

这里需要注意的是 var offset= $(“body”).scrollTop()里面的有些是var offset= $(“html,body”).scrollTop()这样去获取的，因为兼容性问题。有些游览器要通过html获取scrollTop()。我用的是谷歌，所以只写了一个body。

标签：