零基础建站培训介绍

当前位置：

网页设计常用到的九大JavaScript脚本

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

1、回顶部JavaScript脚本：

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

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

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

  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、载入额外的内容：

  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. });

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

4、设置多列层等高：

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

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

5、定时刷新部分页面的内容：

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

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

6、预载入图像：

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

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

7、测试密码强度：
这个比较给力，现在很多网站注册的时候都加入了密码强度测试功能，以下代码也简单提供了密码强度测试功能。

HTML代码部分：

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

JavaScript脚本代码：

  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.     } else if (strongRegex.test($(this).val())) {
  8.         $('#passstrength').className = 'ok';
  9.         $('#passstrength').html('Strong!');
  10.     } else if (mediumRegex.test($(this).val())) {
  11.         $('#passstrength').className = 'alert';
  12.         $('#passstrength').html('Medium!');
  13.     } else {
  14.         $('#passstrength').className = 'error';
  15.         $('#passstrength').html('Weak!');
  16.     }
  17.     return true;
  18. });

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

  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();
  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、自动载入内容：
现在很多网站，特别是微博，都不需要翻页的按钮了，直接下拉后会自动载入内容。下面的脚本就是简单实现了个这种效果。

  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. });
  17. $(document).ready(function() {
  18.     $('#loaded_max').val(50);
  19. });

注：本文整理至20theme，感谢作者的无私分享！

上一课: 下一课:

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • JS window.onload 与 $(document).ready()区别 (5563 次浏览)
    JS里的window.onload 与 JQUERY里的$(document).ready()是我们自己做网站过程中，前端常用的JS代码，它们的作用都是先加载HTML代码后，最后加载JS代码
  • 什么是js文件 (2717 次浏览)
    这里主要指的是Javascript简称JS是因特网上最流行的网页脚本语言，并且可在所有主要的浏览器中运行，比方说 Internet Explorer、 Mozilla、Firefox、N
  • jquery怎么给Table表格添加tr (2924 次浏览)
    下面是使用jquery怎么给Table表格动态添加tr行的方法引入jquery核心js文件，这样才能使用jquery方法创建js添加tr函数function addTr()&
  • Jquery实现淡入淡出过渡效果 (2646 次浏览)
    为了用户体验，我们经常将一个元素的显示与隐藏增加一个过渡效果，实现淡入淡出效果。那么这种淡入淡出效果就需要借助Jquery才能实现。下面介绍一下Jq
  • jquery双击事件dblclick()使用方法 (2602 次浏览)
    打开html前端开发软件，创建一个html页面，然后在这个页面上创建，同时输入一些文字。代码：<div><div>大家好，鼠标双击会有意想不
  • location.href 本窗口与javascript:window.open 新窗口打开用法 (17010 次浏览)
    我们学习了HTML课程，知道一个超链接可以用A标签，新窗口打开使用target="_blank" 属性。除使用使用A标签打开之后，我们还可以使用JS来打开链接地址。
  • 使用js实现网页跳转的几种方法 (6607 次浏览)
    学习了建网站课程的学员都知道，我们在做网站时有时需要进行页面的跳转，页面跳转方法很多，特别常用的跳转就是通过JS来实现网页跳转。下面是使用js
  • JS加密与解密方法 (9899 次浏览)
    在网站制作过程中，JS是需要经常用到的，为了防止网站的JS代码被别人复制，可以对JS代码进行加密。如下图，就是将js进行了加密处理。JS加密方法JS
  • 什么是同步加载与异步加载 (24587 次浏览)
    什么是同步加载在加载数据时仍然执行其他程序，通常加载时是不执行程序的，我们不得不等进度条，因为很多程序在没有加载数据时，可能是无法运行的，
  • JS学习笔记：DOM节点的删除、替换与修改 (8199 次浏览)
    今天在学做网站论坛分享一下JS学习过程中DOM节点的删除、替换与修改的方法。节点的删除：removeChild [父节. removeChild(待删除的子节点)]要站在

教程目录