jquery插件的学习：

HTML部分及应用

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style>
  7.         #float{border: 1px solid #e0e0e0; padding: 10px; position: absolute; width: 170px;}
  8.     </style>
  9.     <script src="js/jquery-1.11.1.min.js"></script>
  10.     <script src="js/smartFloat.js"></script>
  11.     <script>
  12.         $(function(){
  13.             //插件应用
  14.             $("#float").smartFloat({width:"1024px"});//top:原始高度，pos:position的类型,width:到达顶部后的宽度，oWidth:最初的宽度
  15.         });
  16.     </script>
  17. </head>
  18. <body>
  19. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  20. <div id="float">我到了顶部就悬浮</div>
  21. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  22. </body>
  23. </html>

js部分

  1. /**
  2.  * Created by Administrator on 14-9-3.
  3.  */
  4. ;(function($){
  5.     $.fn.extend({
  6.         smartFloat:function(options){
  7.             var defaults = {
  8.                 top:$(this).position().top,//原始高度
  9.                 pos:$(this).css("position"),//原始的postion类型
  10.                 width:"100%", //到达顶部后的宽度
  11.                 oWidth:$(this).width()//最初的宽度
  12.             };
  13.             var options = $.extend(defaults,options);
  14.             var obj = $(this);
  15.             $(window).scroll(function(){
  16.                 var scrolls = $(this).scrollTop();
  17.                 if(scrolls > options.top){
  18.                     if(window.navigator.userAgent.indexOf('MSIE 6.0')!=-1){
  19.                         obj.css({top:scrolls});
  20.                     }else{
  21.                         obj.css({
  22.                             position: "fixed",
  23.                             top: 0
  24.                         });
  25.                         obj.stop().animate({width:options.width});
  26.                     }
  27.                 }else{
  28.                     obj.css({
  29.                         top:options.top,
  30.                         position:""
  31.                     });
  32.                     obj.stop().animate({width:options.oWidth});
  33.                 }
  34.             });
  35.         }
  36.     });
  37. })(jQuery);

jquery插件学习之元素顶部悬浮的更多相关文章

  1. Jquery插件学习

    前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...

  2. jQuery插件学习(一)

    由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了.所以这段时间会 ...

  3. jQuery插件学习笔记

    近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外 ...

  4. JQUERY插件学习之jQuery UI

    jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...

  5. jquery插件 - 学习笔记 （插件参数及函数的调用）

    今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...

  6. jquery插件——检测DOM元素是否在浏览器可视范围之内

    引言 web应用中有很多地方会用到打点,用来检测用户行为,今天就做了个打点相关的需求,为了统计一个广告给用户的展示次数,每次用户请求完成并且渲染完成之后就算一次成功的展示,其实有时候这个广告还没有在用 ...

  7. [置顶] JQuery插件学习教程

    这是JQuery其它常用插件的视频教程,包括validate插件,.comet插件等.同时有大量实例项目,如果你是喜欢JQuery的童鞋千万不要错过. 教程的内容有: 1_validate插件(1) ...

  8. jquery 插件学习

    练习jquery上的一个插件编写 1.标准的3个基本内容,根目录里面创建2个文件夹(存放css和js)和1个html页面文件: 2.测试的主html页面代码 <!DOCTYPE html> ...

  9. jQuery插件学习基础

    1.给jQuery添加全局的函数: $.zgz={  fn1:function(){ alert('我是刚设置的第一个全局函数') },fn2:function(){ alert('我是刚设置的第二个 ...

随机推荐

  1. 文件IO函数和标准IO库的区别

    摘自 http://blog.chinaunix.net/uid-26565142-id-3051729.html 1,文件IO函数,在Unix中,有如下5个:open,read,write,lsee ...

  2. [Mechine Learning & Algorithm] 集成学习方法——Bagging和 Boosting

    使用机器学习方法解决问题时,有较多模型可供选择. 一般的思路是先根据数据的特点,快速尝试某种模型,选定某种模型后, 再进行模型参数的选择(当然时间允许的话,可以对模型和参数进行双向选择) 因为不同的模 ...

  3. IIS连接数、IIS并发连接数、IIS最大并发工作线程数、应用程序池的队列长度、应用程序池的

    IIS连接数 一般购买过虚拟主机的朋友都熟悉购买时,会限制IIS连接数,这边先从普通不懂代码用户角度理解IIS连接数 顾名思义即为IIS服务器可以同时容纳客户请求的最高连接数,准确的说应该叫" ...

  4. vue 列表渲染

    在Vue官网中写道,vue无法直接用索引设置元素, 如 vm.items[0] = {}: 提出的解决方法是用 : example1.items.$set(0, { childMsg: 'Change ...

  5. java基础知识（二）字符串处理

    字符串是程序开发中使用最为频繁,因此为了工作的高效和作为一名想进阶的程序员,了解并掌握字符串的处理显得尤为重要.java为我们提供了String.StringBuffer.StringBuilde三个 ...

  6. python运算符

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcIAAAHCCAIAAADzel4SAAAgAElEQVR4Aey9+bMcSXLnV1dmna/ejR

  7. ubuntu下安装mcrypt

    sudo apt-get install libmcrypt4 php5-mcrypt 一句命令搞定

  8. Python爬虫Scrapy框架入门（0）

    想学习爬虫,又想了解python语言,有个python高手推荐我看看scrapy. scrapy是一个python爬虫框架,据说很灵活,网上介绍该框架的信息很多,此处不再赘述.专心记录我自己遇到的问题 ...

  9. iOS，监听tableVIew的偏移量

    1. 添加监听 [self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObs ...

  10. EXPORT_SYMBOL的使用

    转自:http://blog.csdn.net/cailiwei712/article/details/7998525 在查看内核驱动代码的时候会经常看到在一些函数后面总会跟EXPORT_SYMBOL ...