足球彩票怎么买才能赚钱|时时彩平投赚钱方案
当前位置:首页 > 关于我们 > 建站指南
网页设计中常用的javascript脚本有哪些
作者:admin    2017-04-26 14:37    来源:金方时代
分享到:


网站在建设设计过程中,经常会需要通过CSS样式定义、JS特效实现来做一些比如像:焦点图滚动、返回顶部、选项卡、悬浮菜单等炫酷的表?#20013;?#24335;。


下面金方时代总结出来一些网页设计过程中常用的javascript脚本语言,以备各位建站者和企业主能够有不时之用!


一、回顶部JavaScript脚本:


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

});  


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


二、复制表单顶部标题到底部:


var $tfoot = $('<tfoot></tfoot>');   
$($('thead').clone(true, true).children().get().reverse()).each(function(){   
    $tfoot.append($(this));   
});   

$tfoot.insertAfter('table thead');  


三、载入额外的内容:


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

});  


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


四、设置多列层等高:


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

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


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


五、定时刷新部分页面的内容:


setInterval(function() {   
    $("#refresh").load(location.href+" #refresh>*","");   

}, 10000); // milliseconds to wait  


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


六、预载入图像:


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

});  


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


七、测试密码强度:


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

HTML代码部分:


1、<input type="password" name="pass" id="pass" />

2、<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;   

});  


八、自适应缩放图像:


有时候网站上传的图像需要填充整个指定区域,但是有时候图像比例并不恰好合适,缩放后效果不好。一下代码就实现了检测图像比例然后做?#23454;?#30340;缩放功能。


$(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   

});  


九、自动载入内容:


现在很多网站,特别是微博,都不需要翻页的按钮了,直接下拉后会自动载入内容。下面的脚本就是简单实现了个这?#20013;?#26524;。


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

});  


相信以上javascript脚本能实现大多数企业网站甚至各种功能性网站的基本特效。


关键词:网页设计javascript,建站培训,网站建站,建站技巧,建站视频,css层叠样式表,建站流程,建站,建站程序,在线建站,qq在线客服生成


金方时代——为您提供超高性价比的高端网站建设服务


原文链接:http://www.sgaxh.tw/index_show_catid_19_id_520.html

网站返回按钮 ?#26412;?#32593;站建设公司底部返回按钮
足球彩票怎么买才能赚钱 青海快三2019060322 安徽11选5爱彩乐 爱彩乐手机版 3d试机号开奖号对应 体彩各省11选五走势图 深圳风采开奖号码和深圳风采开奖结果 3D一胆九拖 北京赛車开奖直播网址 河内5分彩控 福建福利彩票双色球