网页常用的jquery效果的整理

1 倒计时、

$(function(){
    var tYear = "";        //输入的年份
    var tMonth = "";    //输入的月份
    var tDate = "";        //输入的日期
    var iRemain = "";    //开始和结束之间相差的毫秒数
    var sDate = "";        //倒计的天数
    var sHour = "";        //倒计时的小时
    var sMin = "";        //倒计时的分钟
    var sSec = "";        //倒计时的秒数
    var sMsec = "";        //毫秒数

    //通用工具函数，在个位数上加零，根据传的N的参数，来设前面加几个零
    function setDig(num,n){
        var str = ""+num;
        while(str.length<n){
            str="0"+str
        }
        return str;
    }
    
    //获得相差的天，小时，分钟，秒
    function getdate(){
        
        //创建开始时间和结束时间的日期对象
        var oStartDate = new Date();
        var oEndDate = new Date();
        
        //获取文本框的值
        tYear = $("#tyear").val();
        tMonth = $("#tmonth").val();
        tDate = $("#tdate").val();
        
        //设置结束时间
        oEndDate.setFullYear(parseInt(tYear));
        oEndDate.setMonth(parseInt(tMonth)-1);
        oEndDate.setDate(parseInt(tDate));
        oEndDate.setHours(0);
        oEndDate.setMinutes(0);
        oEndDate.setSeconds(0);
        
        //求出开始和结束时间的秒数(除以1000)
        iRemain = (oEndDate.getTime() - oStartDate.getTime())/1000;
        
        //总的秒数除以一天的秒数，再取出整数部分，就得出有多少天。
        sDate = setDig(parseInt(iRemain/(60*60*24)),3);
        //总的秒数除以一天的秒数，然后取其中的余数，就是把整数天扣除之后，剩下的总秒数。
        iRemain %= 60*60*24;
        
        //剩下的总秒数除以一个小时的秒数，再取整数部分，就是有多少小时。
        sHour = setDig(parseInt(iRemain/(60*60)),2)
        
        //剩下的总秒数除以一个小时的秒数，再取其余数，这个余数，就是扣除小时这后，剩下的总秒数。
        iRemain %= 60*60;
        
        //剩下的总秒数除以一分钟的秒数，再取其整数部分，就是有多少分钟。
        sMin = setDig(parseInt(iRemain/60),2)
        
        //剩下的总秒数除以一分钟的秒数，再取其余数，这个余数，就是扣除分钟之后，剩下的总秒数。
        iRemain%=60;
        
        //剩下的秒数
        sSec = setDig(iRemain,2);
        
        //毫秒数
        sMsec = sSec*100;        
    }
    
    //更改显示的时间
    function updateShow(){
        $(".showdate span").text(tYear+"-"+tMonth+"-"+tDate);
        $(".count span").each(function(index, element) {
            if(index==0){
                $(this).text(sDate);
            }else if(index==1){
                $(this).text(sHour);
            }else if(index == 2){
                $(this).text(sMin);
            }else if(index == 3){
                $(this).text(sSec);
            }else if(index == 4){
                $(this).text(sMsec);
            }    
        });
    }
    
    //每一秒执行一次时间更新
    function autoTime(){
        getdate();
        //如果小于零，清除调用自己，并且返回
        if(iRemain<0){
            clearTimeout(setT);
            return;
        }
        updateShow();
        var setT = setTimeout(autoTime,1000);
        
    }
    
    //点击按钮开始计时
    $("button").click(function(){
            autoTime();
    })
})

 记录需要注意的地方：

1.1取模运算：iRemain %= 60*60*24;　　就是返回余数，在这个实例中的余数，就是把整数拿走后，剩下的秒数。

1.2工具函数 setDig(num,n)

可以根据传入的参数，自动在传入的数字前加零

demo

2.网页常用的图片延迟加载

图片的延迟加载：即是我们常说的按需加载，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载。这样的好处在于加快了页面的记载速度，提升用户体验。

功能阐述：

2.1

• 图片在没有被加载到时的样式；
• 图片加载的样式；

2.2 html源码

<div class="list_item">
        <div class="pro_img">
         <a href="http://www.okhqb.com/item/1000100414.html" title="TE/中兴 极客Geek V975" target="_blank">
          <img src="http://s.hqbcdn.com/assets/v3/images/

okhqb-loading

.gif" class="lazy" data-original="http://resource.okhqb.com/thumbs/product/30/b8/30b813ccb79e3085bbd0e6c63f841117.170.jpg" alt="TE/中兴 极客Geek V975"/> </a> </div>

　　注意：src属性值是图片子没有被加载到时的图片，一般建议选用比较有趣的动态图，但是图片质量较轻。

                   data-original属性值是正常显示的图片地址。

                样式lazy为

img.lazy {
    background:url("http://s.hqbcdn.com/assets/v3/images/okhqb-loading.gif") no-repeat scroll 50% 50% transparent;
    display: none;
}

　　2.3在页面调用query.lazyload.js中的lazyload()方法

<script type="text/javascript">
$(document).ready(function() {
	$("img.lazy").show().lazyload({effect : "fadeIn"});
})
</script>

　　2.4页面中引入js文件jquery.lazyload.js

http://www.cnblogs.com/huanhuan8808/admin/Files.aspx 下的jquery.lazyload.js 文件

 

在测试的时候，在图片比较多的情况下，效果明显