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 相关文章推荐
js 日期比较相关天数代码
Apr 02 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
javascript实现拖拽碰撞检测
Mar 12 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
详解Python发送邮件实例
2016/01/10 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python设置环境变量的作用和实例
2019/07/09 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
python爬取微博评论的实例讲解
2021/01/15 Python
印度服装购物网站:Limeroad
2018/09/26 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
外贸采购员求职的自我评价
2013/11/26 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
优秀纪检干部材料
2014/08/27 职场文书
刑事代理授权委托书
2014/09/17 职场文书
校长四风对照检查材料
2014/09/27 职场文书
转让协议书
2015/01/27 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
压缩Redis里的字符串大对象操作
2021/06/23 Redis
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技