零基础建站培训介绍

当前位置:

网页设计常用到的九大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(truetrue).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. });
  5. $("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. }
  6. $(document).ready(function() {
  7.     $.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
  8. });

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

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();
  9.         if(width > maxWidth){
  10.             ratio = maxWidth / width;
  11.             $(this).css("width", maxWidth);
  12.             $(this).css("height", height * ratio);
  13.             height = height * ratio;
  14.         }
  15.         var width = $(this).width();
  16.         var height = $(this).height();
  17.         if(height > maxHeight){
  18.         ratio = maxHeight / height;
  19.         $(this).css("height", maxHeight);
  20.         $(this).css("width", width * ratio);
  21.         width = width * ratio;
  22.      }
  23. });
  24. //$("#contentpage img").show();
  25. // IMAGE RESIZE
  26. });

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

注:本文整理至20theme,感谢作者的无私分享!

上一课: 下一课:

发表评论

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

相关教程

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