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

 更新时间:2010年03月23日 00:11:37   作者:  
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中checkbox使用方法简单实例演示

    jquery中checkbox使用方法简单实例演示

    这篇文章主要介绍了jquery中checkbox使用方法简单实例演示,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • PHP+mysql+Highcharts生成饼状图

    PHP+mysql+Highcharts生成饼状图

    本文将结合实际,使用PHP读取Mysql数据表中的数据,并将获取的数据按照要求输出给前端JS,再通过配置调用Highcharts图表库生成饼状图。
    2015-05-05
  • jquery实现二级导航下拉菜单效果实例

    jquery实现二级导航下拉菜单效果实例

    这篇文章主要介绍了jquery二级导航下拉菜单,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • jQuery Ajax 实例全解析

    jQuery Ajax 实例全解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。
    2011-04-04
  • 遍历jquery对象的代码分享

    遍历jquery对象的代码分享

    今天遇到一个问题需要获取tagName,使用jquery,查询了一下,大家说用$("dd").attr("tagName")能获取到,但是得到的返回值是undefined,于是又查询饿了许久,返回遍历了一下jquery封装的对象
    2011-11-11
  • jQuery接受后台传递的List的实例详解

    jQuery接受后台传递的List的实例详解

    这篇文章主要介绍了jQuery接受后台传递的List的实例详解的相关资料,这里提供了前台代码和后台代码的实现,需要的朋友可以参考下
    2017-08-08
  • jquery图片轮播特效代码分享

    jquery图片轮播特效代码分享

    这篇文章主要为大家详细介绍了jquery简单图片轮播特效,图片轮播效果特别适合做产品展示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-09-09
  • 通过jQuery源码学习javascript(一)

    通过jQuery源码学习javascript(一)

    最近在做日志统计程序,发现对方的程序是在Jquery基础上进行开发的,而公司的网站的框架是prototype。而且我也早就想了解一下Jquery源码,故决定研究Jquery源码,模拟它的方法
    2012-12-12
  • jQuery内容筛选选择器实例代码

    jQuery内容筛选选择器实例代码

    这篇文章主要为大家详细介绍了jQuery内容筛选选择器实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 一个有意思的鼠标点击文字特效jquery代码

    一个有意思的鼠标点击文字特效jquery代码

    这篇文章主要介绍了一个有意思的鼠标点击文字特效jquery代码,需要的朋友可以参考下
    2017-09-09

最新评论