随身笔记

作者： admin

  • imagesloaded.pkgd.js判断图片是否加载完成并执行成功失败回调

    兼容IE9以上

    判断 图片 加载 是否 完成 并 回调

    jquery代码写法

    测试地址

  • Snabbt.js – 极简的 JavaScript 动画库

    js动画库 类似于Velocity但是没它这么强大。

    demo及API

    http://pan.baidu.com/s/1dDoFBvb

  • jquery解剖

    以下的文件都要看html的源码   jquery 解剖 源码解析  jquery解析

    1，为什么我们能用$().css()类似这样的方法去写代码呢？

    am

    1、jQuery总体轮廓

     

    am2

    推荐看以下：

       
	  (function(window,undefind){  //第一参数是window全局对象。第二参数是undefind，但偏偏不给它赋值，因为不同浏览器是可以修改undefind的值的，不给它传值是为了保证undefind的值就是undefind
             
              var jQuery=function(){  //此函数是自调用，里面的代码会被自动执行。如果此函数被调用jQuery()相当于执行了new jQuery.fn.init(selector,context)

               
                    var jQuery=function(selector,context){   //声明一个jQuery函数
                        return new jQuery.fn.init(selector,context);  //我们平时写的$() ,其实就是调用这里所返回给我们的
                    };
                  
                    jQuery.fn=jQuery.prototype={ //在jquery的原型对象上扩展方法和属性 ，基本用法都是$().xx()
                       constructor:jQuery,  //要使用字面量的书写方式给原型对象添加属性和方法，就要constructor属性来指定构造函数，不然是找不到的
                       init:function(){},
                       jquery:"1.7.1",
                       eq:function(){},
                       size:function(){}
                       //...
                    };
              
                 


                    jQuery.fn.init.prototype=jQuery.fn;  //只需要理解，老爸给财产儿子，儿子继承老爸财产。以后只要在老爸身上添加属性和方法自然儿子也就有老爸的属性和方法了


                    jQuery.extend=jQuery.fn.extend=function(){ 
                                    this['xx']=arguments[0].xx
                                    this['yy']=arguments[0].yy
                                    // Return the modified object
                                    return this;
                     }  //同时在jquery构造函数和jquery原型对象添加同样的方法extend



                    jQuery.extend({  //相当于在jquery这个构造函数上添加属性和方法，调用基本是$.xx()。如果是基于jQuery.fn.extend扩展的话，就相当于为jQuery扩展功能了，一般调用都是$().xx()
                          xx:function(){ document.title=document.title+'1111'+$().jquery },
                          yy:function(){ document.title=document.title+'yyyy' },
                          ajax:function(){}
                    });


                    return jQuery;
              }();  //结果是 jQuery = jQuery;

             
              window.jQuery=window.$=jQuery   //把jquery函数赋值给window.jQuery和window.$;这里的jQuery其实就是return jQuery，一旦jQuery()就相当于new jQuery.fn.init(selector,context)
	 })(window);  //将window对象传入，匿名函数中，免得去找省时间

      $() //相当于执行了jQuery() ，又相当于执行了 new jQuery.fn.init(selector,context)

  • 手机上拉到顶部刷新加载效果

    使用方法

    <link rel="stylesheet" href="../dist/dropload.min.css">
<script src="../dist/dropload.min.js"></script>

     

    $('.element').dropload({
    scrollArea : window,
    loadDownFn : function(me){
        $.ajax({
            type: 'GET',
            url: 'json/more.json',
            dataType: 'json',
            success: function(data){
                alert(data);
                // 代码执行后必须重置
                me.resetload();
            },
            error: function(xhr, type){
                alert('Ajax error!');
                me.resetload();
            }
        });
    }
});
    参数 说明 默认值 可填值
    scrollArea 滑动区域 绑定元素自身 window
    domUp 上方DOM {
    domClass : ‘dropload-up’,
    domRefresh : ‘<div class=”dropload-refresh”>↓下拉刷新</div>’,
    domUpdate : ‘<div class=”dropload-update”>↑释放更新</div>’,
    domLoad : ‘<div class=”dropload-load”>○加载中…</div>’
    }    		 数组
    domDown 下方DOM {
    domClass : ‘dropload-down’,
    domRefresh : ‘<div class=”dropload-refresh”>↑上拉加载更多</div>’,
    domUpdate : ‘<div class=”dropload-update”>↓释放加载</div>’,
    domLoad : ‘<div class=”dropload-load”>○加载中…</div>’
    }    		 数组
    distance 拉动距离 50 数字
    loadUpFn 上方function 空 function(me){
    //你的代码
    me.resetload();
    }
    loadDownFn 下方function 空 function(me){
    //你的代码
    me.resetload();
    }

    API

    暴露一些功能，可以让dropload更灵活的使用

    lock() 锁定dropload

    unlock() 解锁dropload

    源文件下载：http://pan.baidu.com/s/1sjzMu

    类似功能如：Hook.js – 在传统网页上实现手机中的下拉刷新效果

    https://github.com/ximan/dropload

     

     

     

     

  • Hook.js – 在传统网页上实现手机中的下拉刷新效果

    手机 上拉 顶部 刷新 加载

    我们都很喜欢移动设备上的“下拉刷新”功能，那么如果这个效果应用到传统网页上怎么样？嗯，Hook.js 可以实现。他们采用了手机和平板电脑中的这个创新，只要向下滚动了一下，然后弹回到顶部，页面就会自动刷新。

    Hook.js 使用非常简单，首先引入下面三个文件：

    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="hook/hook.css" type="text/css" />
<script src="hook/hook.js" type="text/javascript"></script>

     

     

    然后把下面的 HTML 代码放到 <body> 标签里：

    <div id="hook">
 <div id="loader">
 <div class="spinner"></div>
 </div>
 <span id="hook-text">Reloading...</span>
</div>

     

     

    Hook.js 的实现其实很简单，完整源代码如下：

    $(function () {
  window.loadheight = $('#hook').height();
  window.hidden = $("#hook").animate("marginTop", "-" + loadheight + "px");
  window.visible = $("#hook").animate("marginTop", "0px");
  $("#hook").css("marginTop", "-" + loadheight + "px")
});
$(function hook() {
  var loadheight = $('#hook').height();
  $(window).scroll(function (event) {
    var st = $(window).scrollTop();
    if (st <= 0) {
     $("#hook").animate({
    "marginTop": "0px"
     }, 200);
     $("#hook").delay(500).slideUp(200, function () {
     window.location.reload()
   })
 }
   if ($.browser.webkit) {
    if (st == 0) {
     $('body').css('overflow', 'hidden')
    }
   }
 })
});

    http://pan.baidu.com/s/1kTvoSmj

    http://www.cnblogs.com/lhb25/archive/2013/03/08/pull-to-refresh-for-the-web-with-hook-js.html