本文介绍如何利用jQuery配合dimensions.js插件实现网页元素的精确定位与动态移动。通过加载必要的JS库，利用offset方法获取元素坐标，并结合margin、border等参数控制元素位置，实现点击链接后指定DOM元素的移动效果。
jQuery结合dimensions.js实现元素定位与移动
演示地址：http://www.healdream.com/upLoad/html/jquery/position/。使用方法：首先需要将相关的两个JavaScript文件引入到页面中。
主要代码部分即如上所示，实现过程相对简单。
代码示例如下：
<script type="text/javascript" src="../jquery.js"></script>
<!-- 加载 dimensions.js（这是我们要测试的文件） -->
<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('#')); // 提取 # 符号后面的字符串作为目标ID
var options = { // 定义各个参数，主要用于后续移动操作
margin: parseInt( $('#margin').val() ), // .val() 方法获取当前对象的value值
border: parseInt( $('#border').val() ), // parseInt 方法将值转换为整型
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>