jQuery 位置函数实例教程
详细出处参考：.net教程/article/22685.htm">http://www.111cn.net/article/22685.htm
<!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 位置函数实例教程
时间： 2024-10-03 07:56:47
jQuery 位置函数实例教程的相关文章
jquery ajax实例教程与详细说明(1/2)
说明 $.ajax({ type: "post", url: "handler1.ashx", data: { username: "admin", password: "123" }, success: successhandle }); function successhandle(rep) { $("#msg").html(rep); } 详细讲一下关于jquery ajax实例 实例 通过 ajax
10分钟学会写Jquery插件实例教程_jquery
有很多朋友都用过jquery插件,但是很少有人自己动手写过jQuery插件,本文就以实例形式简单叙述了jQuery插件的实现方法.分享给大家供大家参考之用.具体方法如下: 具体而言,其实就是把一些常用.实用.通用的功能封装起来而以,简单的来讲就是把这些代码放在一个方法里面,可以达到重复使用的效果,这样就可以不需要每次要用此功能的时候都去重新写一遍. 现在Jquery里面加入了插件的概念,只要按照它特定的格式当作平时写function一样去写就可以了,不虽然搞得太复杂的.信不信由你们,反正
jQuery中队列queue()函数的实例教程_jquery
如果当前jQuery对象匹配多个元素:获取队列时,只获取第一个匹配元素上的队列:设置队列(替换队列.追加函数)时,则为每个匹配元素都分别进行设置. 该函数属于jQuery对象(实例).如果需要移除并执行队列中的第一个函数,请使用dequeue()函数.你也可以使用clearQueue()函数清空指定的队列. 语法jQuery 1.2 新增该函数.queue()函数具有如下两种用法: 用法一: jQueryObject.queue( [ queueName ] [, newQueue ] ) 如果
Jquery ajax基础教程_jquery
jQuery的Ajax带来了无需刷新的web页面革命.这里就详细介绍一下jQuery所涉及到的Ajax操作.(无需特殊说明,均需要有服务器配置,这里本人用的是Tomcat 7) 1.基于请求加载文件数据 这里的请求通常都是网页的某些操作,如点击等. 而其加载数据的类型归类为以下四种:a.加载HTML文件:b.加载JSON文件:c.加载Javascript文件:d.加载XML文件. 其对应的四种加载方法分别是:load.getJSON.getScript.get. a.加载HTML文件 把编写好的
PHP and AJAX responseXML 实例教程
PHP and AJAX responseXML 实例教程 AJAX技术可以用来恢复的数据库信息为XML . AJAX的数据库为XML的例子 在AJAX以下例子,我们将演示如何网页上可以卖到信息从一个MySQL数据库,它转换为一个XML文档,并用它来显示信息在几个不同的地方. 这个例子我似乎很像" PHP的AJAX技术数据库"例如,在最后一章,但是有一个很大的不同:在这个例子中我们得到的数据从PHP的XML网页使用responseXML功能. 接收的响应作为XML文件使我们能够更新这个
jQuery中文入门指南，翻译加实例，jQuery的起点教程_基础知识
jQuery中文入门指南,翻译加实例,jQuery的起点教程 中文版译者:Keel 此文以实例为基础一步步说明了jQuery的工作方式.现以中文翻译(添加我的补充说明)如下.如有相关意见或建议请麻烦到我的 BLOG 写个回复或者 EMAIL 告知. 英文原版:http://jquery.bassistance.de/jquery-getting-started.html ,感谢原文作者 Jörn Zaefferer 本文发布已征求原作者同意. 另外我认为在学习过程中,有两个API文档你要打开随时
jQuery实现宽屏图片轮播实例教程_jquery
本文实例讲述了jQuery实现宽屏图片轮播实例教程.分享给大家供大家参考.具体如下: 运行效果截图如下: 引入jquery库 <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 构建html整个代码分为三部分: 1.加载部分loadding : 2.图片部分,这里图片只能是4张,有心的朋友再改良下吧: 3.TAB按钮部分,当然这里也只能是4个按钮,也需要改
jQuery实例select双向选择列表实例教程
提示:您可以先修改部分代码再运行 先看效果图: 列表实例教程-jquery 列表双向选择"> 完整代码如下所示: 代码如下 复制代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator&qu
在JavaScript中重写jQuery对象的方法实例教程_jquery
jQuery是一个款非常优秀的类库,它给我们解决了很多的客户端编程,但是任何东西都不是万能的,当它不能满足我们的需求时我们就需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:比如我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存在HTML标签的属性中,使HTML标签的代码量减少,如:ID,Timestamp等等,这些不需要用户输入但又不得不提交的字段,通过表单提交的做法是 <input name="ID" val