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>
<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><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。

jquery实现滑动滚动条出现对联广告相关推荐

对联广告（jQuery）
对联广告(jQuery) 上代码!!! <!DOCTYPE html> <html lang="en"><head><meta chars ...
[jQuery基础] jQuery动效案例(一) -- 弹窗广告、对联广告
弹窗广告实现效果展示实现步骤第一步(实现静态效果) CSS部分 *{margin: 0;padding: 0; } .ad{position: fixed;right: 0;bottom: 0; ...
常用的对联广告带关闭功能
<html> <head> <title>常用的对联广告带关闭功能 - qpsh.com</title> <meta http-equiv=&qu ...
javascript制作对联广告
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
符合标准的对联广告代码
原本工作正常的对联广告突然宣布罢工,为什么?标准化真的那么脆弱吗?" 不符合标准的正常工作的对联广告: Code1<htmlxmlns="http://www.w3.org/ ...
对联广告，带关闭，可以移动
在网页中加入以下代码两个图的,一个是关闭用到的,一个是广告图 <script language=JavaScript src="js/scroll.js"></ ...
jquery判断div滚动条到底部
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜 ...
jquery.nicescroll完美滚动条使用方法
jquery.nicescroll完美滚动条使用方法(转) 配置参数 : 当调用"niceScroll"你可以传递一些参数来定制视觉方面: cursorcolor - 十六进制改变 ...
selenium java 滚动条_java+selenium使用JS、键盘滑动滚动条
本篇文章介绍如何使用JS和键盘对象对页面进行滑动滚动条-------------主要针对java做自动化测试的同学一:使用键盘对象操作滚动条 //导包 importorg.openqa.seleni ...

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

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

jquery实现滑动滚动条出现对联广告相关推荐

最新文章

热门文章