jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft


Posted in Javascript onMarch 23, 2010
<!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>
Javascript 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
vue中使用codemirror的实例详解
Nov 01 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 #Javascript
javascript 多浏览器 事件大全
Mar 23 #Javascript
jQuery $.each的用法说明
Mar 22 #Javascript
javascript 用原型继承来实现对象系统
Mar 22 #Javascript
用js实现的自定义的对话框的实现代码
Mar 21 #Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 #Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 #Javascript
You might like
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
JavaScript实现表格排序方法
2013/06/14 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
Python中给List添加元素的4种方法分享
2014/11/28 Python
python计算日期之间的放假日期
2018/06/05 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
pymysql模块的操作实例
2019/12/17 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
python的pip有什么用
2020/06/17 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
全球度假村:Club Med
2017/11/27 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
关于递归的一道.NET面试题
2013/05/12 面试题
信息科学与技术专业求职信范文
2014/02/20 职场文书
职务说明书范文
2014/05/07 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
党小组鉴定意见
2015/06/02 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书