用jquery来定位_jquery

demo:http://www.healdream.com/upLoad/html/jquery/position/
down:http://www.51files.com/?Z25US63TM6OBHQJ2XM58

用法:
首先当然是将两个js包含进来了

复制代码 代码如下:

<script type="text/javascript" src="../jquery.js"></script>
<!-- load dimensions.js (this is what we're testing! -->
<script type="text/javascript" src="dimensions.js"></script>

复制代码 代码如下:

 <script type="text/javascript" charset="utf-8">
            $(function() {//这个是$(document).ready()的简写
                $('#userAgent').html(navigator.userAgent);//.html(str)方法是将当前dom用str替代
                //navigator.userAgent这句是用来得到客户端的浏览器类型的
                $('a').click(function(event) {//对链接的点击事件定义函数
                    var href = this.href;//得到当前的链接字符串
                    var id = href.substr(href.indexOf('#'));//得到#后面的字符串
                    var options = {//定义各个参数,主要是待会move时用到
                        margin:  parseInt( $('#margin').val()  ),//.val()方法是得到当前对象的value值
                        border:  parseInt( $('#border').val()  ),//parseInt方法就是转换为int型,也就是整形
                        padding: parseInt( $('#padding').val() ),
                        scroll:  parseInt( $('#scroll').val()  )
                    };
                    var offset = {};
                    //offset方法是在dimensions.js里定义的
                    $(id).offset(options, offset);
                    $('#moveable').css(offset);//设置id为moveable的dom的css为offset
                    return false;
                });
            });
        </script>

主要的代码就这些了,是不是很简单啊

时间: 2024-09-26 23:49:50

用jquery来定位_jquery的相关文章

jQuery网页定位导航特效实现方法_jquery

本文实例讲述了jQuery网页定位导航特效实现方法.分享给大家供大家参考,具体如下: 描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离(相对于顶部),如果滚动距离大于等于楼层距离,即进入了相应楼层,然后通过一个变量来记录该楼层的信息,最后传递给右边高亮显示 1.点击右边固定导航项时,左边的内容跟着切换. 只需将右边a的href设置为左边区块的id加

jQuery实现定位滚动条位置_jquery

jQuery实现滚动条滚动到子元素位置(方便定位) 关键代码如下所示: <div class="of-y" id="nurse" > <table class="high width" id="nurse-plan"> <tr id="tr-one"></tr> <tr id="tr-two"></tr> <t

疯狂Jquery第一天(Jquery学习笔记)_jquery

好了开始我的Jquery第一天. 我也是从Hello wrod!开始的.关于jquery 的引用我直接一笔带过.如下: 复制代码 代码如下: <html> <head> <title>jquery 链式操作</title> <script type="text/javascript" src="jquery-1.3.1.js"></script> <script type='text/ja

jquery div 定位焦点

*fix:要定位的元素 *rel:相对定位的元素 *options:{},align:左右对齐;vlign:垂直对齐;xleft:水平补给值;xleft:垂直补给值;adjust:是否相对窗口自动调整;rwindow:定位相对于窗口(align&vlign为center时垂直或水平居中); */ (function(win,$){ win.rposition=function(fix,rel,options){ var rectleft,recttop,recth=fix.outerheight

在网站上应该用的30个jQuery插件整理_jquery

当然你现在可能不善于用,但我敢肯定你会发现他们在你未来的项目中使用!. Nivo滑块 毫无疑问,这个插件是世界上最真棒jQuery的滑块图片,并配有超过15个过渡效果. Anything Slider 任何滑块从所有最通用的滑块.您可以添加绝对的东西,从视频到简单的文字和图像,这是真棒. 幻灯片 幻灯片是,本着简约的jQuery幻灯片插件.挤满了一套有用的功能,以帮助新手和高级开发人员创造优雅和用户友好的幻灯片. jQuery的周期插件 jQuery的周期插件支持许多不同类型的过渡效果的幻灯片插

七个不允许错过的jQuery小技巧_jquery

jQuery是一款轻量级的JavaScript库,是最流行的客户端HTML脚本之一,它在WEB设计师和开发者中非常的有名,并且有非常多有用的插件和技术. 本文我们将为大家分享一些jQuery小技巧: 一.在新窗口打开链接 用下面的代码,你点击链接即可在新窗口打开: $(document).ready(function() { //select all anchor tags that have http in the href //and apply the target=_blank $("a

关于jQuery参考实例 1.0 jQuery的哲学_jquery

本文翻译自jQuery Cookbook (O'Reilly 2009) 1.0 The jQuery Philosophy jQuery的哲学是"写更少的代码,做更多的事情",这一哲学可分述为三个概念: 用CSS选择器查找元素,并通过jQuery方法来操作这些元素 在元素集上链式调用多个jQuery方法 jQuery封装与隐式遍历 充分理解这三个概念对于编写jQuery代码来说至关重要.我们来详细看一下这三个概念. 查找元素并进行操作 更准确的说,是在DOM树中定位一批元素,然后对该

分享12个实用的jQuery代码片段_jquery

jQuery是一款优秀的JavaScript库,它在WEB开发者和网页设计师中非常出名,帮助网页设计师开发出很多有创意和漂亮的WEB页面. 本文主要分享了12个有用的jQuery技巧,具体内容如下 下面是我收集的一些小技巧,这些技巧将帮助你提高你网站布局和应用的创意性以及功能性. 一.在新窗口打开链接 用这个代码,你点击超文本链接时会在新窗口中打开,为用户带来更好的体验: $(document).ready(function() { //select all anchor tags that h

从零开始学习jQuery (三) 管理jQuery包装集_jquery

一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等. 二.前言 本系列的2,3篇上面列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明. 本章内容很少, 主要讲解动态创建元素和操作jQuery包装集的各个函数. 三.动态创建元素 1.错误的编程方法 我们经常使用ja