jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
作者:
jQuery的位置函数(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小应用
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery的位置函数(offset(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),scrollTop(),scrollLeft())小应用</title>
<style type="text/css">
#divShow{width:100px;height:50px;background-color:Green;display:none;}
#divAd{width:100px;height:100px;background-color:Red;position:absolute;top:100px;left:100px;}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//在文本框下方显示一个div,类似日历控件那样。
function showDiv(obj){
jQuery("#divShow").css("left",jQuery(obj).offset().left);
jQuery("#divShow").css("top",jQuery(obj).offset().top + jQuery(obj).outerHeight());
jQuery("#divShow").show();
}
jQuery(function(){
});
//滚动条滚动,执行下面的函数,适合做浮动广告
jQuery(this).scroll(function(){
jQuery("#divAd").css("top",100 + jQuery(document).scrollTop());
jQuery("#divAd").css("left",100 + jQuery(document).scrollLeft());
});
</script>
</head>
<body>
<input type="text" value="ok" onclick="showDiv(this);" />
<div id="divShow">2010-03-22</div>
<div id="divAd">浮动广告</div>
<div style="height:2000px;width:2000px;">用来撑出滚动条</div>
</body>
</html>
您可能感兴趣的文章:
- 浅谈jQuery页面的滚动位置scrollTop、scrollLeft
- 关于scrollLeft,scrollTop的浏览器兼容性测试
- js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
- JQuery Dialog(JS 模态窗口,可拖拽的DIV)
- js实现拖拽效果
- 百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
- Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性
- 关于js拖拽上传 [一个拖拽上传修改头像的流程]
- javascript支持firefox,ie7页面布局拖拽效果代码
- JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)