用jquery来定位


Posted in Javascript onFebruary 20, 2007

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>

主要的代码就这些了,是不是很简单啊
Javascript 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
React简单介绍
May 24 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
NiftyCube——轻松实现圆角边框
Feb 20 #Javascript
nicejforms——美化表单不用愁
Feb 20 #Javascript
greybox——不开新窗口看新的网页
Feb 20 #Javascript
datePicker——日期选择控件(with jquery)
Feb 20 #Javascript
一直复略了的一个问题,关于表单重复提交
Feb 15 #Javascript
永不消失的title提示代码
Feb 15 #Javascript
Javascript操纵Cookie实现购物车程序
Feb 15 #Javascript
You might like
全文搜索和替换
2006/10/09 PHP
模仿OSO的论坛(五)
2006/10/09 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
深入理解Python中各种方法的运作原理
2015/06/15 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
python设置环境变量的原因和方法
2019/06/24 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
代领毕业证委托书
2014/08/02 职场文书
项目申请汇报材料
2014/08/16 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
房屋转让协议书
2014/10/18 职场文书
六一儿童节开幕词
2015/01/29 职场文书
本溪关门山导游词
2015/02/09 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python
Python自动化之批量处理工作簿和工作表
2021/06/03 Python