零基础建站培训介绍

当前位置：

网页设计常用到的九大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，感谢作者的无私分享！

上一课: 下一课:

发表回复

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

相关教程

  • 如何在网页文字后加水平线 图文教程 (119759 次浏览)
    如何在网页文字后加水平线?在HTML中，定义水平线可以使用水平线标签HR标签来写一个水平线。基本写法：[cce_html]<hr />[/cce_html]并且
  • 使用CSS伪类:before, :after在网页插入内容 图文教程 (144994 次浏览)
    :before 伪元素在元素之前添加内容:before这个伪元素允许创作人员在元素内容的特别前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用
  • css实现网页调用服务器端字体@font-face属性 图文教程 (146666 次浏览)
    在网页制作和网站开发过程中，网页上使用的字体往往由于浏览者电脑中没有相应的字体，达不到我们设计的效果。为了解决这个问题，我们可以直接使用我们
  • fireworks怎么设计重复折叠的字体效果 图文教程 (110549 次浏览)
    想要使用fireworks制作字体效果，那么这里给大家讲解一个简单的制作字体的方法，使用的软件名称：fireworks8简体中文版 (含序列号)1、首先到啊fir
  • 网页设计常用到的九大JavaScript脚本 (18324 次浏览)
    网页设计中经常会用到JavaScript脚本，能够为我们的网站或网页添加特效，比如我们网站中的回顶部、焦点图、客服代码、选项卡等都可以通过JavaScript脚
  • 网站前端设计常用的10款jQuery特效插件 图文教程 (18366 次浏览)
    对于网站前端开发工程师来说，在前端设计中，经常会使用到jQuery特效，对于一些常用的jQuery特效，我们可以制作成插件使用。下面是网站前端设计常用的
  • HTML常用书写工具有哪些 (115098 次浏览)
    HTML常用写书工具有以下几种：第一种：记事本记事本是最简单的HTML书写工具，但功能也是特别少的，不太适合建网站新手来使用。（新手学习HTML
  • 什么是HTML标签，常用HTML标签有哪些 (119679 次浏览)
    什么是HTML标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML标签即是网页浏览器识别符，就像一个人名字张三、李四代表人的姓名一样。这里说
  • 什么是CSS伪类，常用CSS伪类有哪些 (15361 次浏览)
    什么是CSS伪类伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。例如：
  • 浏览器禁用javascript怎么解除 图文教程 (19275 次浏览)
    现在大多网站都会使用JS特效代码，如果浏览器中 禁用了javascript，那么就会导致网站显示不正常，如何去解决浏览器禁用javascript问题呢?浏览器禁用
  • Bootstrap JavaScript 插件大全 图文教程 (16625 次浏览)
    TAB Js选项卡 第一种：声明式方法原理：TAB选项卡有二部分组成：按钮、内容第一步：做出选项卡按钮<ul class="nav n
  • HTML 脚本 (11180 次浏览)
    HTML 脚本JavaScript 使 HTML 页面具有更强的动态和交互性。。实例插入一段脚本如何将脚本插入 HTML 文档。document.write("欢迎来到菜鸟教程"

教程目录

网站标签

做网站公司 网站培训 网站建设 网站制作教程 创建网站步骤 北京网站建设培训 广州网站制作培训 合肥建网站培训 微信小程序教程 搭建个人网站 建站培训 网站制作学习 做网站需要学习什么 织梦cms建站教程 PS教程 快速建站教程 企业网站制作教程 论坛制作视频教程 电子商城制作教程 外贸网站制作教程 中英文多语网站制作教程 HTML5 视频教程 CSS3视频教程 网站前端开发教程 网站后台开发教程 wordpress模板主题开发 仿站教程 织梦建站视频教程 如何做网站 怎么创建个人网站 网站建设公司 代建网站