base库--- 一个应用JS

  1 /**
 * Created by Administrator on 2014/6/3 0003.
 */
$(function () {
    //个人中心下拉
    $('.js-hd-right').hover(function () {
        $(this).css('background', 'url("img/arrow2.png") no-repeat 80px 13px');
        $('.js-drop-down').show().animate({
            step: 10,
            t: 10,
            mul: {
                o: 100,
                height: 120
            }
        });

    }, function () {
        $(this).css('background', 'url("img/arrow.png") no-repeat 80px 13px');
        $('.js-drop-down').animate({
            step: 10,
            t: 10,
            mul: {
                o: 0,
                height: 0
            },
            fn: function () {
                $('.js-drop-down').hide();
            }

        });
    });
    var shade = $('#shade');   //遮罩盒子
    //登录对话框
    var $login = $('#login');  //登陆框盒子

    //当浏览器视口改变的时候，重新计算登录盒子的left和top值
    $login.center(350, 250);
    $('.js-btn-login').click(function () {
        $login.center(350, 250);
        $login.show();
        shade.show().animate({
            attr: 'o',
            target: 30,
            step: 1,
            t: 50

        });
        document.documentElement.style.overflow = 'hidden';
    });

    //拖拽对话框
    $login.drag($('#login').find('h2').ge(0));

    //注册对话框
    var $reg = $('#reg');  //注册框盒子

    //当浏览器视口改变的时候，重新计算注册框的left和top值
    $reg.center(600, 550);
    $('.js-btn-reg').click(function () {
        $reg.center(600, 550);
        $reg.show();
        shade.show().animate({
            attr: 'o',
            target: 30,
            step: 1,
            t: 50

        });
        document.documentElement.style.overflow = 'hidden';
    });
    $('.js-btn-close').click(function () {
        $($(this).ge(0).parentNode.parentNode).hide();
        shade.animate({
            attr: 'o',
            target: 0,
            step: 1,
            t: 50,
            fn: function () {
                shade.hide();
            }

        });
        document.documentElement.style.overflow = 'auto';
    });
    //拖拽对话框
    $reg.drag($('#reg').find('h2').ge(0));

    //百度分享
    $('#share').hover(function () {
        $(this).animate({
            attr: 'x',
            target: 0
        });

    }, function () {
        $(this).animate({
            attr: 'x',
            target: -211
        });

    }).css('top', getScroll().top + (getInner().height - parseInt($('#share').css('height'))) / 2 + 'px');

    $(window).bind('scroll', function () {
        setTimeout(function(){
            $('#share').animate({
                attr: 'y',
                target: getScroll().top + (getInner().height - parseInt($('#share').css('height'))) / 2
            })
        },100)
    });

    //滑动导航
    $('.js-nav-about li').hover(function () {
        var target = $(this).first().offsetLeft;

        $('.js-nav-hover').animate({
            attr: 'x',
            target: target + 20,
            fn: function () {
                $('.js-nav-white').animate({
                    attr: 'x',
                    target: -target,
                    t: 10,
                    step: 10

                })
            }
        })
    }, function () {

        $('.js-nav-hover').animate({
            attr: 'x',
            target: 20,
            fn: function () {
                $('.js-nav-white').animate({
                    attr: 'x',
                    target: 0,
                    t: 10,
                    step: 10

                })
            }
        })
    });

    //测试DIV
    $('#test').toggle(function () {
        $('#test').css('background', '#ff0000');
    }, function () {
        $('#test').css('background', '#00ff00');
    }, function () {
        $('#test').css('background', '#0000ff');
    })

    //手风琴
    $('.js-accordion h2').toggle(function () {

        $(this).next().animate({
            mul: {
                h: 0,
                o: 0
            }
        })
    }, function () {
        $(this).next().animate({
            mul: {
                h: 150,
                o: 100
            }
        })
    });

    //注册表单  focus   blur

    //在刷新页面后，还原所有的表单数据初始化状态
    $('form').first().reset();


    $('form').form('user').bind('focus', function () {
        $('.info-user').show().next().hide().next().hide();
    }).bind('blur', function () {
        if ($(this).value() == '') {
            $('.info-user').hide();
        } else if (!check_user()) {
            $('.info-user').hide().next().show();
        } else {
            $('.info-user').hide().next().next().show();
        }
    });
//    function check_user(){
//        if(/^[a-zA-Z0-9]{2,20}$/.test($('form').form('user').value())) return true;
//    }

    function check_user() {
        var flag = true;
        if (!/[w]{2,20}/.test(trim($('form').form('user').value()))) {
            $('#reg .error-user').html('输入不合法，请重新输入！');
            return false;
        } else {
            $('#reg .loading').css('display', 'block');
            $('#reg .info-user').css('display', 'none');
            ajax({
                method : 'post',
                url : 'is_user.php',
                data : $('form').eq(0).serialize(),
                success : function (text) {
                    if (text == 1) {
                        $('#reg .error-user').html('用户名被占用！');
                        flag = false;
                    } else {
                        flag = true;
                    }
                    $('#reg .loading').css('display', 'none');
                },
                async : false
            });
        }
        return flag;
    }


    //密码验证
    $('form').form('pass1').bind('focus', function () {
        $('.info-pass1').show().next().hide().next().hide();
    }).bind('blur', function () {
        if ($(this).value() == '') {
            $('.info-pass1').hide();
        } else {
            if (check_pass(this)) {

                $('.info-pass1').hide().next().next().show();
            } else {

                $('.info-pass1').hide().next().show();
            }
        }
    }).bind('keyup', function () {
        check_pass(this);
    });
//    function check_pass1 (){
//        if(check_pass($('form').form('pass1').first())) return true;
//    }
    //密码验证函数
    function check_pass(_this) {
        var value = $(_this).value();
        var value_length = value.length;
        var code_length = 0;
        var flag = false;
        //判断密码是否符合三个要求
        if (value_length >= 6 && value_length <= 20 && !/s/.test(value)) {
            $('.info-pass1 .q1').html('●').css('color', 'green');
        } else {
            $('.info-pass1 .q1').html('○').css('color', '#666');
        }
        if (value_length > 0 && !/s/.test(value)) {
            $('.info-pass1 .q2').html('●').css('color', 'green');
        } else {
            $('.info-pass1 .q2').html('○').css('color', '#666');
        }

        //判断密码的种类和安全级别
        if (/[a-z]/.test(value)) {
            code_length++;
        }
        if (/[A-Z]/.test(value)) {
            code_length++;
        }
        if (/[0-9]/.test(value)) {
            code_length++;
        }
        if (/[^a-zA-Z0-9s]/.test(value)) {
            code_length++;
        }
        if (code_length >= 2) {
            $('.info-pass1 .q3').html('●').css('color', 'green');
        } else {
            $('.info-pass1 .q3').html('○').css('color', '#666');
        }
        //显示安全级别
        if (code_length >= 3 && value_length >= 10) {
            $('.info-pass1 .s1').css('color', 'green');
            $('.info-pass1 .s2').css('color', 'green');
            $('.info-pass1 .s3').css('color', 'green');
            $('.info-pass1 .s4').html('高').css('color', 'green');
        } else if (code_length >= 2 && value_length >= 8) {
            $('.info-pass1 .s1').css('color', '#f60');
            $('.info-pass1 .s2').css('color', '#f60');
            $('.info-pass1 .s3').css('color', '#ccc');
            $('.info-pass1 .s4').html('中').css('color', '#f60');
        } else if (code_length >= 1) {
            $('.info-pass1 .s1').css('color', 'maroon');
            $('.info-pass1 .s2').css('color', '#ccc');
            $('.info-pass1 .s3').css('color', '#ccc');
            $('.info-pass1 .s4').html('低').css('color', 'maroon');
        } else {
            $('.info-pass1 .s1').css('color', '#ccc');
            $('.info-pass1 .s2').css('color', '#ccc');
            $('.info-pass1 .s3').css('color', '#ccc');
            $('.info-pass1 .s4').html(' ').css('color', '#ccc');
        }

        //返回密码是否符合要求
        if (value_length >= 6 && value_length <= 20 && code_length >= 2 && !/s/.test(value)) flag = true;
        return flag;

    }

    //二次密码
    $('form').form('pass2').bind('focus', function () {
        $('.info-pass2').show().next().hide().next().hide();
    }).bind('blur', function () {
        if ($(this).value() == '') {
            $('.info-pass2').hide();
        } else if (check_pass2()) {

            $('.info-pass2').hide().next().next().show();
        } else {
            $('.info-pass2').hide().next().show();
        }
    });
    function check_pass2(){
        if(trim( $('form').form('pass2').value()) == trim($('form').form('pass1').value())) return true;
    }
    //回答
    $('form').form('ans').bind('focus', function () {
        $('.info-ans').show().next().hide().next().hide();
    }).bind('blur', function () {
        if ($(this).value() == '') {
            $('.info-ans').hide();
        } else if (check_ans()) {
            $('.info-ans').hide().next().next().show();
        } else {
            $('.info-ans').hide().next().show();
        }
    });
    function check_ans(){
        if(trim($('form').form('ans').value()).length >= 2 && trim($('form').form('ans').value()).length <= 32) return true;
    }

    $('form').form('ques').bind('change',function(){
        if(check_ques()) $('.error-ques').hide();
    })
    function check_ques(){
        if($('form').form('ques').value() > 0) return true;
    }
    function check_email(){
         if(/^[w-.]+@[w-]+(.[a-zA-Z]{2,4}){1,2}$/.test($('form').form('email').value())) return true;
    }
    //电子邮件
    $('form').form('email').bind('focus', function () {
        if ($(this).value().indexOf('@') == -1) $('.all-email').show();
        $('.info-email').show().next().hide().next().hide();
    }).bind('blur', function () {
        $('.all-email').hide();

        if ($(this).value() == '') {
            $('.info-email').hide();
        } else if (check_email()) {

            $('.info-email').hide().next().next().show();
        } else {

            $('.info-email').hide().next().show();
        }
    }).bind('keyup', function (event) {     //电子邮件显示补全
        if ($(this).value().indexOf('@') == -1) {
            $('.all-email').show();
            $('.all-email li span').html($(this).value());
        } else {
            $('.all-email').hide();
        }
        $('.all-email li').css('background', '#fff');
        $('.all-email li').css('color', '#666');
        if (event.keyCode == 40) {
            if (this.index == undefined || this.index >= $('.all-email li').length() - 1) {
                this.index = 0;
            } else {
                this.index++;
            }
            $('.all-email li').eq(this.index).css('background', '#E5EDF2').css('color', '#666');

        }
        if (event.keyCode == 38) {
            if (this.index == undefined || this.index <= 0) {
                this.index = $('.all-email li').length() - 1;
            } else {
                this.index--;
            }
            $('.all-email li').eq(this.index).css('background', '#E5EDF2').css('color', '#666');

        }
        if (event.keyCode == 13) {
            $(this).value($('.all-email li').eq(this.index).text());
            $('.all-email').hide();
            this.index = undefined;
        }

    });

    //电子邮件选定补全
    $('form .all-email li').bind('mousedown', function () {
        $('form').form('email').value($(this).text());
    })


    //日期
    var year = $('form').form('year');
    var month = $('form').form('month');
    var day = $('form').form('day');

    //年
    for (var i = 1950; i <= 2013; i++) {
        //使用 Option 构造函数创建：  new Option("文本","值") ;

        year.first().add(new Option(i, i), undefined);
    }
    //月
    for (var i = 1; i <= 12; i++) {
        month.first().add(new Option(i, i), undefined);
    }
    //日
    var day30 = [4, 6, 9 , 11];
    var day31 = [1, 3, 5, 7, 8, 10, 12];
    year.bind('change', select_day);
    month.bind('change', select_day);
    //年月日检测
    function check_birthday() {
        if (year.value() != 0 && month.value() != 0 && day.value() != 0) return true;
    }
    //选择日后自动消失
    day.bind('change', function () {
        if (check_birthday()) $('.error-birthday').css('display', 'none');
    });
    function select_day() {
        if (month.value() != 0 && year.value() != 0) {
            var cur_day = 0;
            if (inArray(day31, parseInt(month.value()))) {
                cur_day = 31;
            } else if (inArray(day30, parseInt(month.value()))) {
                cur_day = 30;
            } else {
                if ((parseInt(year.value()) % 4 == 0 && parseInt(year.value()) % 100 != 0)
                    || parseInt(year.value()) % 400 == 0) {
                    cur_day = 29;
                } else {
                    cur_day = 28;
                }
            }
            day.first().options.length = 1;
            for (var i = 1; i <= cur_day; i++) {
                day.first().add(new Option(i, i), undefined);
            }
        } else {
            day.first().options.length = 1;
        }
    }

    //判断某一值是否存在某个数组里
    function inArray(array, value) {
        for (var i in array) {
            if (array[i] == value) return true;
        }
        return false;
    }


    //输入字符提示
    $('form').form('ps').bind('keyup',function(){
        check_clear(this);

    });
    function check_clear(_this){
        var value = $(_this).value();
        var value_lenght = value.length;
        var num = 200-value_lenght;
        if(num >= 0){
            $(_this).next().next().show().find('.num').html(num);
            $(_this).next().next().next().hide();
            return true;
        }else{

            $(_this).next().next().hide().next().show().find('.num').html(Math.abs(num));
            return false;
        }
    }
    //字符清理
    $('#reg .m-tb-reg .clear').click(function(){
        $('form').form('ps').value($('form').form('ps').value().substring(0,200));
        check_clear($('form').form('ps').first());
    })


    //表单提交
    $('form').form('sub').click(function(){
        var flag = true ;
        if(!check_clear($('form').form('ps').first())){
            flag = false ;
        }
        if(!check_user()){
            $('.info-user').hide().next().show();
            flag = false ;
        }
        if(!check_pass($('form').form('pass1').first())){
            $('.error-pass1').show();
            flag = false ;
        }

        if(!check_pass2()){
            $('.error-pass2').show();
            flag = false ;
        }
        if(!check_ques()){
            $('.error-ques').show();
            flag = false ;
        }
        if(!check_ans()){
            $('.error-ans').show();
            flag = false ;
        }
        if(!check_email()){
            $('.error-email').show();
            flag = false ;
        }
        if(!check_birthday()){
            $('.error-birthday').show();
            flag = false ;
        }
        if (flag) {
            var _this = this;
            $('#loading').css('display', 'block').center(200, 40);
            $('#loading p').html('正在提交注册中...');
            _this.disabled = true;
            $(_this).css('backgroundPosition', 'right');
            ajax({
                method : 'post',
                url : 'add.php',
                data : $('form').eq(0).serialize(),
                success : function (text) {
                    if (text == 1) {
                        $('#loading').css('display', 'none');
                        $('#success').css('display', 'block').center(200, 40);
                        $('#success p').html('注册成功，请登录...');
                        setTimeout(function () {
                            $('#success').css('display', 'none');
                            $login.hide();
                            $('#reg .succ').css('display', 'none');
                            $('form').first().reset();
                            _this.disabled = false;
                            $(_this).css('backgroundPosition', 'left');
                            screen.animate({
                                attr : 'o',
                                target : 0,
                                t : 30,
                                step : 10,
                                fn : function () {
                                    shade.hide();
                                }
                            });
                        }, 1500);
                    }
                },
                async : true
            });
        }
    })


    //轮播 初始化
    $('.js-sld img').opacity(0);
    $('.js-sld img').eq(0).opacity(100);
    $('.js-sld ul li').css('color','#ccc').eq(0).css('color','#0066ff');

    //轮播计数器
    var banner_index = 1;
    //图片张数
    var banner_length = $('.js-sld img').length();
    //类型
    var banner_type = 1;
    //轮播自动切换

    var banner_thimer = setInterval(banner_fn,3000);
    //轮播手动切换
    $('.js-sld ul li').hover(function(){

        clearInterval(banner_thimer) ;
        if ($(this).css('color') != 'rgb(0, 102, 255)' && $(this).css('color') != '#0066ff') {
            //如果鼠标移上的下标是当前这张,那么不执行动画
            banner(this, banner_index == 0 ? $('.js-sld ul li').length() - 1 : banner_index - 1);
        }

    },function(){
        //轮播自动切换
        banner_index = $(this).index() + 1;
        banner_thimer = setInterval(banner_fn,3000);
    });



    function banner(obj,prev){
        $('.js-sld ul li').css('color','#ccc');
        $('.js-sld ul li').eq($(obj).index()).css('color','#0066ff');
        $('.sld-text').html($('.js-sld img').eq($(obj).index()).attr('alt'));

        if(banner_type == 1){
            $('.js-sld img').eq(prev).animate({
                attr : 'o',
                target : 0,
                t : 30,
                step : 10
            }).css('zIndex', 1);
            $('.js-sld img').eq($(obj).index()).animate({
                attr : 'o',
                target : 100,
                t : 30,
                step : 10
            }).css('zIndex', 2);
        }else if(banner_type == 2){
            //将上一张的层级改为1，并用动画的形式 将TOP值改为 150，  这里做成动画 跟当前显示的图片动画的配合， 才有整体UL向下移动的动画效果
            $('.js-sld img').eq(prev).css('zIndex', 1).opacity(100).animate({
                attr : 'y',
                target : 150,
                t : 30,
                step : 10
            });
            //将当前这张的层级改为2 先将要显示的图片CSS TOP值强制改为 -150  然后会调用aimate 这个方法， 会将显示的图片TOP值 用动画的形式改为0， 就有了从上到下的动画过程。
            $('.js-sld img').eq($(obj).index()).css('top','-150px').css('zIndex', 2).opacity(100).animate({
                attr : 'y',
                target : 0,
                t : 30,
                step : 10
            });
        }


    }
    function banner_fn(){
        if(banner_index > banner_length-1 ) banner_index = 0;
        //eq返回BS对象，但是传BS对象会出错，所以使用first 返回原生对象
        banner($('.js-sld img').eq(banner_index).first(), banner_index == 0 ? $('.js-sld ul li').length() - 1 : banner_index - 1);
        banner_index++;
    }



    //延迟加载
    //得到图片的集合并保持，有利于网页性能
    var wait_load = $('.js-wait-load');
    var wait_length = wait_load.length();
    $(window).bind('scroll', _wait_load);
    $(window).bind('resize', _wait_load);
    //将所有的IMG透明度设置为0
    wait_load.opacity(0);

    function _wait_load() {
        //使用定时器提高代码性能。 避免目标抖动
        setTimeout(function(){
            // alert(i+'-----'+wait_load.length()+'----'+$(wait_load.ge(i)).attr('xsrc'));
            for(var i =0 ; i< wait_length; i++){
                var _this = wait_load.ge(i);  //必须先保存每个img的原生对象， 否则只能得到1个对象，而不是12个
//                if((getInner().height + getScroll().top) >= offsetTop(_this)){
//                    $(_this).attr('src',$(_this).attr('xsrc')).opacity(100);
//                }
                if ((getInner().height + getScroll().top) >= offsetTop(_this)) {
                    $(_this).attr('src', $(_this).attr('xsrc')).animate({
                        attr : 'o',
                        target : 100,
                        t : 30,
                        step : 10
                    });
                }
            }
        },100);
    }





    //图片预加载
    //拖拽对话框
    $('#photo-big').drag($('#photo-big').find('h2').ge(0));

    //图片弹窗
    var photo_big = $('#photo-big');
    photo_big.center(620, 511).resize(function () {

    });

    $('.js-wait-load').click(function(){
        $('#photo-big').center(620, 511);
        $('#photo-big').show();
        shade.show().animate({
            attr: 'o',
            target: 30,
            step: 1,
            t: 50

        });
        document.documentElement.style.overflow = 'hidden';
        //替换地址为loding图片
        $('#photo-big .big img').attr('src', 'img/loading.gif').css('width', '32px').css('height', '32px').css('top', '190px');
        //图片加载....
        var bin_img = new Image();
        $(bin_img).bind('load',function(){
            //当图片在后台加载完毕后，淡入
            $('#photo-big .big img').attr('src',big_src).animate({
                attr: 'o',
                target: 100,
                t: 30,
                step: 1
            }).css('width', '600px').css('height', '450px').css('top','0px').opacity(0);
        });
        //为了兼容IE  必须写在LODA下面
        var big_src = $(this).attr('bigsrc');
        bin_img.src = big_src;

        var children = this.parentNode.parentNode;  //得到当前节点父亲的父亲

        prev_next_img(children);
        //存放当前图片的索引值
        $(this).attr('index',$(children).index());
    })
    //鼠标移上
    $('#photo-big .left').hover(function(){
        $('#photo-big .sl').animate({
            attr: 'o',
            target: 50,
            t:  30,
            step: 1
        })
    },function(){
        $('#photo-big .sl').animate({
            attr: 'o',
            target: 0,
            t:  30,
            step: 1
        })
    })
    //鼠标移上
    $('#photo-big .right').hover(function(){
        $('#photo-big .sr').animate({
            attr: 'o',
            target: 50,
            t:  30,
            step: 1
        })
    },function(){
        $('#photo-big .sr').animate({
            attr: 'o',
            target: 0,
            t:  30,
            step: 1
        })
    })
    //上一张
    $('#photo-big .left').click(function(){
        //替换地址为loding图片
        $('#photo-big .big img').attr('src', 'img/loading.gif').css('width', '32px').css('height', '32px').css('top', '190px');
        //创建IMG对象
        var current_img = new Image();
        $(current_img).bind('load', function () {
            //当图片加载到缓存完成后，执行这个动画
            $('#photo-big .big img').attr('src',current_img.src).animate({
                attr: 'o',
                target: 100,
                t: 30,
                step: 1
            }).css('width', '600px').css('height', '450px').css('top','0px').opacity(0);

        });
        //为了兼容IE  SRC地址得放在LODA方法下面
        current_img.src = $(this).attr('src') ;
        //应该先取地址后再改地址。
        // 得到IMG 集合对象中的 ge 方法中的父亲的父亲， 用于图片加载函数使用
        // 使用 previndex 方法求 同级上一个 节点索引值 ，两个参数（当前的节点索引，父节点）

        var children = $('.js-ad dl img').ge(prevIndex($('#photo-big .big img').attr('index'), $('.js-ad').ge(0))).parentNode.parentNode;

        prev_next_img(children);

    })
    //下一张
    $('#photo-big .right').click(function(){
        //替换地址为loding图片
        $('#photo-big .big img').attr('src', 'img/loading.gif').css('width', '32px').css('height', '32px').css('top', '190px');
        //创建IMG对象
        var current_img = new Image();
        $(current_img).bind('load', function () {
            //当图片加载到缓存完成后，执行这个动画
            $('#photo-big .big img').attr('src',current_img.src).animate({
                attr: 'o',
                target: 100,
                t: 30,
                step: 1
            }).css('width', '600px').css('height', '450px').css('top','0px').opacity(0);

        });
        //为了兼容IE  SRC地址得放在LODA方法下面
        current_img.src = $(this).attr('src') ;
        //应该先取地址后再改地址。
        // 得到IMG 集合对象中的 ge 方法中的父亲的父亲， 用于图片加载函数使用
        // 使用 previndex 方法求 同级上一个 节点索引值 ，两个参数（当前的节点索引，父节点）

        var children = $('.js-ad dl img').ge(nextIndex($('#photo-big .big img').attr('index'), $('.js-ad').ge(0))).parentNode.parentNode;

        prev_next_img(children);

    })
    //图片预加载函数
    function prev_next_img(children){
        //加载上一张 和下一张到缓存中
        var prev_img = new  Image();
        var next_img = new  Image();
        prev = prevIndex($(children).index(),children.parentNode);  //得到上一个索引 和下一个索引
        next = nextIndex($(children).index(),children.parentNode);

        //上一张的地址和下一张的地址
        prev_img.src = $('.js-ad dl').eq(prev).find('img').attr('bigsrc');
        next_img.src = $('.js-ad dl').eq(next).find('img').attr('bigsrc');

        //将上一张和下一张图片地址存在SPAN按钮中
        $('#photo-big .left').attr('src',prev_img.src);
        $('#photo-big .right').attr('src',next_img.src);
        //将 当前显示的小图片图片INDEX 存放到 大图IMG
        $('#photo-big .big img').attr('index', $(children).index());
        //显示张数

        $('#photo-big .index').html(parseInt($(children).index()) + 1+'/'+  $('.js-ad dl').length());
    }


    //调用AJAX


});