[Turn] 9 JavaScript scripts commonly used in web design

JavaScript scripts are often used in web design, which can add special effects to our website or web pages. For example, the back to the top, focus map, customer service code, tabs, etc. in our website can all be implemented through JavaScript scripts. Here are 9 collected online. A more commonly used JavaScript script for later use!

1. Back to the top JavaScript script:

1. $("a[href='#top']").click(function() {   
2.     $("html, body").animate({ scrollTop: 0 }, "slow");   
3.     returnfalse;    
4. });  

Copy the above code and put it in the JavaScript tag of the web page, and then add a link with the id "top" at the bottom to automatically return to the top.

2. Copy the header from the top of the form to the bottom:

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

3. Load additional content:

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

Sometimes it is necessary to load some additional data content from the outside for a single div layer, the following short code will be very useful.

4. Set the height of the multi-column layer:

1. var maxheight = 0;   
2. $("div.col").each(function(){   
3.     if($(this).height() > maxheight) { maxheight = $(this).height(); }   
4. });   
5.     
6. $("div.col").height(maxheight);  

In some layout designs, sometimes it is necessary to make the two div layers have the same height. The following is the principle of using the js method (the class of the div layers of the same height needs to be set to "col").

5. Regularly refresh the content of some pages:

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

If you need to refresh some content regularly on your web page, such as Weibo messages or live broadcasts, in order to prevent users from tediously refreshing the entire page, you can use the following code to refresh part of the page content regularly.

6. Preload images:

1. $.preloadImages = function() {   
2.     for(var i = 0; i<arguments.length; i++) {   
3.         $("<img />").attr("src", arguments[i]);   
4.     }   
5. }   
6.     
7. $(document).ready(function() {   
8.     $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");   
9. });  

Some website pages have not loaded the images when they are opened, and they have to wait hard. The following code realizes that the entire page is opened after the images are loaded.

7. Test password strength:
This is quite powerful. Now many websites have added a password strength test function when registering. The following code also provides a simple password strength test function.

HTML code part:

1. <inputtype="password"name="pass"id="pass"/>      
2. <spanid="passstrength"></span>   

JavaScript script code:

1. $('#pass').keyup(function(e) {   
2.     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");   
3.     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");   
4.     var enoughRegex = new RegExp("(?=.{6,}).*", "g");   
5.     if (false == enoughRegex.test($(this).val())) {   
6.         $('#passstrength').html('More Characters');   
7.     } elseif (strongRegex.test($(this).val())) {    
8.         $('#passstrength').className = 'ok';   
9.         $('#passstrength').html('Strong!');   
10.     } elseif (mediumRegex.test($(this).val())) {    
11.         $('#passstrength').className = 'alert';   
12.         $('#passstrength').html('Medium!');   
13.     } else {   
14.         $('#passstrength').className = 'error';   
15.         $('#passstrength').html('Weak!');   
16.     }   
17.     returntrue;    
18. });  

8. Adaptive scaling of images:
Sometimes the images uploaded on the website need to fill the entire specified area, but sometimes the image ratio is not just right, and the effect after scaling is not good. A little bit of code implements the function of detecting the image scale and then doing the appropriate scaling.

1. $(window).bind("load", function() {   
2.     // IMAGE RESIZE  
3.     $('#product_cat_list img').each(function() {   
4.         var maxWidth = 120;   
5.         var maxHeight = 120;   
6.         var  ratio = 0;   
7.         var width = $(this).width();   
8.         var height = $(this).height();   
9.     
10.         if(width > maxWidth){   
11.             ratio = maxWidth / width;   
12.             $(this).css("width", maxWidth);   
13.             $(this).css("height", height * ratio);   
14.             height = height * ratio;   
15.         }   
16.         var width = $(this).width();   
17.         var height = $(this).height();   
18.         if(height > maxHeight){   
19.         ratio = maxHeight / height;   
20.         $(this).css("height", maxHeight);   
21.         $(this).css("width", width * ratio);   
22.         width = width * ratio;   
23.      }   
24. });   
25. //$("#contentpage img").show();  
26. // IMAGE RESIZE  
27. });  

9. Automatically load content:
Now many websites, especially Weibo, do not need the button to turn pages, and the content will be automatically loaded after directly pulling down. The following script simply achieves this effect.

1. var loading = false;   
2. $(window).scroll(function(){   
3.     if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){   
4.         if(loading == false){   
5.         loading = true;   
6.         $('#loadingbar').css("display","block");   
7.         $.get("load.php?start="+$('#loaded_max').val(), function(loaded){   
8.             $('body').append(loaded);   
9.             $('#loaded_max').val(parseInt($('#loaded_max').val())+50);   
10.             $('#loadingbar').css("display","none");   
11.             loading = false;   
12.         });   
13.         }   
14.     }   
15. });   
16.     
17. $(document).ready(function() {   
18.     $('#loaded_max').val(50);   
19. });  

Note: This article is organized into 20theme, thank the author for his selfless sharing!

Reprinted from: http://www.xuejianzhan.com/2670.html