网页设计中经常会用到JavaScript，能够为我们的网站或网页添加特效，比如我们网站中的回顶部、焦点图、客服代码、选项卡等都可以通过JavaScript脚本实现，这里在网上收集到9个比较常用的JavaScript脚本，以备后用！

1、回顶部JavaScript脚本：

$("a[href='#top']").click(function() {  

   $("html, body").animate({ scrollTop: 0 }, "slow");  

   return false;  

});  

复制以上代码放在网页的JavaScript标签中，然后在底部添加一个id为“top”的链接就会自动返回到顶部了。

2、复制表单顶部标题到底部：

var $tfoot = $('<tfoot></tfoot>');  

$($('thead').clone(true, true).children().get().reverse()).each(function(){  

   $tfoot.append($(this));  

});  

$tfoot.insertAfter('table thead');  

3、载入额外的内容：

$("#content").load("somefile.html", function(response, status, xhr) {  

 // error handling  

 if(status == "error") {  

   $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);  

 }  

});  

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

4、设置多列层等高：

var maxheight = 0;  

$("div.col").each(function(){  

   if($(this).height() > maxheight) { maxheight = $(this).height(); }  

});      

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

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

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>  

JavaScript脚本代码：

$('#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);  

});  

至于这些代码放在哪个文件夹以及如何用可以参考html中js代码怎么用。