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-9\s]/.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

 });