用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>

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

赞 (0)

相关推荐

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

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

  • 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 提供开发者开发插件的几种模式 1.$.extend();     //这个方法是绑定在$上面的.可以通过$直接调用 2.$.fn.方法名     //这个方法是绑定在Dom对象上面的可以通过$('').方法名();调用 3.$.widget   //通过jQuery UI 部件工厂模式创建. 二.插件的开发过程 1.$.extend(); 这个方法其实很简单,只是像$上面添加了一个静态的方法而已.主要用途是对插件api的扩展. eg: //$.extend();为了防止,变量和

  • 基于jQuery实现定位导航位置效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 当滚动条滚动到内容区域的时候,侧边导航条定位到屏幕,不再动,并且点击导航条跳转到内容所在的位置: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d

  • 用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.j

  • 基于JQuery和原生JavaScript实现网页定位导航特效

    慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>爱淘气购物网-JQuery网页定位导航特效</title> <style> /*All tag*/ html, body, div, ul, li, img

  • JQuery 网站换肤功能实现代码

    从那以后,我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法.但最近我要写一篇如何 使用jQuery编写简单代码实现它的教程. 我将向你们逐步解说整个的过程,不仅仅因为要展示jQuery代码的简介,同时也要揭示jQuery库中的若干高级特性. 首先,代码 复制代码 代码如下: $(document).ready(function() { $('.styleswitch').click(function() { switchStylestyle(this.getAttribute("rel

  • jquery easyui滚动条部分设置介绍

    在使用dialog插件时,默认是屏幕居中的,但是当页面出现滚动条时,dialog并没有随着滚动条往下滚动,这时就需要用户滑动滚动条来定位dialog,这不人性化,在说出解决方案前先来普及一下jquery关于定位的几个方法 复制代码 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(docume

  • Jquery和JS获取ul中li标签的实现方法

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN

  • js实现目录定位正文示例

    js实现目录定位正文示例

    一:先查看截图效果 1)  2)点击左侧导航栏里的目录会对应到对应的层 二:下载引进jquery-1.7.2.min.js文件 三:页面代码: 复制代码 代码如下: <pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

随机推荐