<script language="javascript" src="ad.js"></script>
ad.js内容如下:
//广告图片
var mqycn_ad_img="img/ad.gif"
//广告连接
var mqycn_ad_href="http://hi.baidu.com/mqycn"
var mqycn_outhtml
mqycn_outhtml="<a href=\""+mqycn_ad_href+"\" target=\"_blank\">"
mqycn_outhtml+="<img src=\""+mqycn_ad_img+"\" width=\"468\" height=\"60\" style=\"border:none\"></a>"
document.write(mqycn_outhtml)
<div style="width:100%height:100pxposition:fixed"><button onclick="this.parentNode.parentNode.removeChild(this.parentNode)">关闭</button>
</div>
程序上给body或documentElement的scrollLeft、scrollTop赋值,浏览器在没有出滚动条时,赋值后该值不会发生变化,始终是0。
下面是示例,该检测方法,不仅可以检测页面滚动条,传入要检测的节点,一样可以得到想要的结果。
代码(给scrollLeft,scrollTop赋负数值时会报错,此外scrollLeft,scrollTop的值不能大于实际最大的滚动值):
复制代码代码示例:
var isScroll = function (el) {
// test targets
var elems = el ? [el] : [document.documentElement, document.body]
var scrollX = false, scrollY = false
for (var i = 0i <elems.lengthi++) {
var o = elems[i]
// test horizontal
var sl = o.scrollLeft
o.scrollLeft += (sl >0) ? -1 : 1
o.scrollLeft !== sl &&(scrollX = scrollX || true)
o.scrollLeft = sl
// test vertical
var st = o.scrollTop
o.scrollTop += (st >0) ? -1 : 1
o.scrollTop !== st &&(scrollY = scrollY || true)
o.scrollTop = st
}
// ret
return {
scrollX: scrollX,
scrollY: scrollY
}
}
第二部分,jquery判断滚动条到底部并加载数据的方法。js滚动条回到顶部示例代码 js 页面刷新记住滚动条位置的方法 js动态隐藏滚动条(兼容多浏览器 IE FF等)
有些浏览器下会出现累计执行、重复执行的情况,可以在准备执行前和执行完毕加一个执行完毕的标记,当判断上一次执行完毕,再执行该次操作。
复制代码代码示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>jQuery实现当拉动滚动条到底部加载数据</title>
<style type="text/css">
*{margin:0padding:0}
body{font-size:14pxcolor:#444font-family:"微软雅黑",Arialbackground:#fff}
a{color:#444text-decoration: none}
a:hover{color:#065BC2text-decoration: none}
.clear{clear:both}
img{border:nonevertical-align: middle}
ul{list-style: none}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
//首先,窗口绑定事件scroll
$(window).bind("scroll",function() {
// 判断窗口的滚动条是否接近页面底部,这里的20可以自定义
if ($(document).scrollTop() + $(window).height() >$(document).height() - 20) {
//没有写ajax的调用,直接触发了链接的click事件。
$("#container").append('<div style="height:500px">dd</div>')
} // www.jbxue.com
})
</script>
</head>
<body>
<div id="container">
dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
</div>
</body>
</html>
另外,此下拉到最后,浏览器会记住当前滚动条位置,会在刷新页面后,直接执行操作,所以在刷新页面时要执行,滚动条到顶部的操作。
复制代码代码示例:
<script>
$(document).ready(function(){
$('body,html').animate({scrollTop:0})
})
</script>
在jQuery中获取浏览器窗口的尺寸信息
在jQuery中获取浏览器及页面的长度与宽度主要用到以下几个代码:
$(window).height() //浏览器时下窗口可视区域高度
$(document).height()//浏览器时下窗口文档的高度
$(document.body).height()//浏览器时下窗口文档body的高度
$(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
$(window).width() //浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width()//浏览器时下窗口文档body的高度
$(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding margin