九个非常常用的WEB设计JavaScript脚本

最近买了本JavaScript和HTML5的相关书籍，没事就喜欢翻翻，因为目前主要还是学习java，所以偶尔还是会抽点时间来看看关于JavaScript和HTML5甚至是CSS3方面的一些知识，而今天给大家分享的就是九个非常常用的WEB设计JavaScript脚本，这篇文章也是网站上看到的，原文的地址我也没找到，哎，悲剧啊，如果有原文或者相关网友看到原文地址，麻烦请留个言，智言在这里会感谢大家的。

好了，废话不多说了，看下面的内容吧！

1.返回顶部
每当滚动等到页面底部时，只需要点击id为”top”的链接就会自动返回到顶部。

$("a[href='#top']").click(function() {
    $("html, body").animate({ scrollTop: 0 }, "slow");
    return false;
});

2.克隆表单顶部标题到底部

var $tfoot = $('<tfoot></tfoot>');
$($('thead').clone(true, true).children().get().reverse()).each(function(){
    $tfoot.append($(this));
});
$tfoot.insertAfter('table thead');

3.载入额外的内容

有时候需要为单独的一个div层从外部载入一些额外的数据内容，下面这段短码将会非常有用

$("#content").load("somefile.html", function(response, status, xhr) {
  // error handling
  if(status == "error") {
    $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
  }
});

4.设置多列层等高
在一些布局设计中，有时候需要让两个div层高度相当，下面是采用js方法实现的原理（需要等高的div层设置class为”col”）

var maxheight = 0;
$("div.col").each(function(){
    if($(this).height() > maxheight) { maxheight = $(this).height(); }
});

$("div.col").height(maxheight);

5.定时刷新部分页面的内容
如果在你的网页上需要定时的刷新一些内容，例如微博消息或者实况转播，为了不让用户繁琐的刷新整个页面，可以采用下面这段代码来定时刷新部分页面内容

setInterval(function() {
    $("#refresh").load(location.href+" #refresh>*","");
}, 10000); // milliseconds to wait

6.预载入图像
有些网站页面打开图像都未载入完毕，还要苦苦等待。下面这段代码实现图像都载入完毕后再打开整个网页

$.preloadImages = function() {
    for(var i = 0; i<arguments.length; i++) {
        $("<img />").attr("src", arguments[i]);
    }
}

$(document).ready(function() {
    $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});

7.测试密码强度
现在很多网站注册的时候都加入了密码强度测试功能，以下代码也简单提供了一个密码强度测试的功能

HTML代码部分

<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>

JS代码部分

$('#pass').keyup(function(e) {
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*W).*$", "g");
    var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{6,}).*", "g");
    if (false == enoughRegex.test($(this).val())) {
        $('#passstrength').html('More Characters');
    } else if (strongRegex.test($(this).val())) {
        $('#passstrength').className = 'ok';
        $('#passstrength').html('Strong!');
    } else if (mediumRegex.test($(this).val())) {
        $('#passstrength').className = 'alert';
        $('#passstrength').html('Medium!');
    } else {
        $('#passstrength').className = 'error';
        $('#passstrength').html('Weak!');
    }
    return true;
});

8.自适应缩放图像

有时候网站上传的图像需要填充整个指定区域，但是有时候图像比例并不恰好合适，缩放后效果不好。一下代码就实现了检测图像比例然后做适当的缩放功能。

$(window).bind("load", function() {
    // IMAGE RESIZE
    $('#product_cat_list img').each(function() {
        var maxWidth = 120;
        var maxHeight = 120;
        var ratio = 0;
        var width = $(this).width();
        var height = $(this).height();

        if(width > maxWidth){
            ratio = maxWidth / width;
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratio);
            height = height * ratio;
        }
        var width = $(this).width();
        var height = $(this).height();
        if(height > maxHeight){
        ratio = maxHeight / height;
        $(this).css("height", maxHeight);
        $(this).css("width", width * ratio);
        width = width * ratio;
     }
});
//$("#contentpage img").show();
// IMAGE RESIZE
});

9.自动载入内容

现在很多网站，特别是微博，都不需要翻页的按钮了，直接下拉后会自动载入内容。下面的脚本就是简单实现了个这种效果。

var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
        loading = true;
        $('#loadingbar').css("display","block");
        $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
            $('body').append(loaded);
            $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
            $('#loadingbar').css("display","none");
            loading = false;
        });
        }
    }
});

$(document).ready(function() {
    $('#loaded_max').val(50);
});