base库--- 一个应用JS


1
/** 2 * Created by Administrator on 2014/6/3 0003. 3 */ 4 $(function () { 5 //个人中心下拉 6 $('.js-hd-right').hover(function () { 7 $(this).css('background', 'url("img/arrow2.png") no-repeat 80px 13px'); 8 $('.js-drop-down').show().animate({ 9 step: 10, 10 t: 10, 11 mul: { 12 o: 100, 13 height: 120 14 } 15 }); 16 17 }, function () { 18 $(this).css('background', 'url("img/arrow.png") no-repeat 80px 13px'); 19 $('.js-drop-down').animate({ 20 step: 10, 21 t: 10, 22 mul: { 23 o: 0, 24 height: 0 25 }, 26 fn: function () { 27 $('.js-drop-down').hide(); 28 } 29 30 }); 31 }); 32 var shade = $('#shade'); //遮罩盒子 33 //登录对话框 34 var $login = $('#login'); //登陆框盒子 35 36 //当浏览器视口改变的时候,重新计算登录盒子的left和top值 37 $login.center(350, 250); 38 $('.js-btn-login').click(function () { 39 $login.center(350, 250); 40 $login.show(); 41 shade.show().animate({ 42 attr: 'o', 43 target: 30, 44 step: 1, 45 t: 50 46 47 }); 48 document.documentElement.style.overflow = 'hidden'; 49 }); 50 51 //拖拽对话框 52 $login.drag($('#login').find('h2').ge(0)); 53 54 //注册对话框 55 var $reg = $('#reg'); //注册框盒子 56 57 //当浏览器视口改变的时候,重新计算注册框的left和top值 58 $reg.center(600, 550); 59 $('.js-btn-reg').click(function () { 60 $reg.center(600, 550); 61 $reg.show(); 62 shade.show().animate({ 63 attr: 'o', 64 target: 30, 65 step: 1, 66 t: 50 67 68 }); 69 document.documentElement.style.overflow = 'hidden'; 70 }); 71 $('.js-btn-close').click(function () { 72 $($(this).ge(0).parentNode.parentNode).hide(); 73 shade.animate({ 74 attr: 'o', 75 target: 0, 76 step: 1, 77 t: 50, 78 fn: function () { 79 shade.hide(); 80 } 81 82 }); 83 document.documentElement.style.overflow = 'auto'; 84 }); 85 //拖拽对话框 86 $reg.drag($('#reg').find('h2').ge(0)); 87 88 //百度分享 89 $('#share').hover(function () { 90 $(this).animate({ 91 attr: 'x', 92 target: 0 93 }); 94 95 }, function () { 96 $(this).animate({ 97 attr: 'x', 98 target: -211 99 }); 100 101 }).css('top', getScroll().top + (getInner().height - parseInt($('#share').css('height'))) / 2 + 'px'); 102 103 $(window).bind('scroll', function () { 104 setTimeout(function(){ 105 $('#share').animate({ 106 attr: 'y', 107 target: getScroll().top + (getInner().height - parseInt($('#share').css('height'))) / 2 108 }) 109 },100) 110 }); 111 112 //滑动导航 113 $('.js-nav-about li').hover(function () { 114 var target = $(this).first().offsetLeft; 115 116 $('.js-nav-hover').animate({ 117 attr: 'x', 118 target: target + 20, 119 fn: function () { 120 $('.js-nav-white').animate({ 121 attr: 'x', 122 target: -target, 123 t: 10, 124 step: 10 125 126 }) 127 } 128 }) 129 }, function () { 130 131 $('.js-nav-hover').animate({ 132 attr: 'x', 133 target: 20, 134 fn: function () { 135 $('.js-nav-white').animate({ 136 attr: 'x', 137 target: 0, 138 t: 10, 139 step: 10 140 141 }) 142 } 143 }) 144 }); 145 146 //测试DIV 147 $('#test').toggle(function () { 148 $('#test').css('background', '#ff0000'); 149 }, function () { 150 $('#test').css('background', '#00ff00'); 151 }, function () { 152 $('#test').css('background', '#0000ff'); 153 }) 154 155 //手风琴 156 $('.js-accordion h2').toggle(function () { 157 158 $(this).next().animate({ 159 mul: { 160 h: 0, 161 o: 0 162 } 163 }) 164 }, function () { 165 $(this).next().animate({ 166 mul: { 167 h: 150, 168 o: 100 169 } 170 }) 171 }); 172 173 //注册表单 focus blur 174 175 //在刷新页面后,还原所有的表单数据初始化状态 176 $('form').first().reset(); 177 178 179 $('form').form('user').bind('focus', function () { 180 $('.info-user').show().next().hide().next().hide(); 181 }).bind('blur', function () { 182 if ($(this).value() == '') { 183 $('.info-user').hide(); 184 } else if (!check_user()) { 185 $('.info-user').hide().next().show(); 186 } else { 187 $('.info-user').hide().next().next().show(); 188 } 189 }); 190 // function check_user(){ 191 // if(/^[a-zA-Z0-9]{2,20}$/.test($('form').form('user').value())) return true; 192 // } 193 194 function check_user() { 195 var flag = true; 196 if (!/[\w]{2,20}/.test(trim($('form').form('user').value()))) { 197 $('#reg .error-user').html('输入不合法,请重新输入!'); 198 return false; 199 } else { 200 $('#reg .loading').css('display', 'block'); 201 $('#reg .info-user').css('display', 'none'); 202 ajax({ 203 method : 'post', 204 url : 'is_user.php', 205 data : $('form').eq(0).serialize(), 206 success : function (text) { 207 if (text == 1) { 208 $('#reg .error-user').html('用户名被占用!'); 209 flag = false; 210 } else { 211 flag = true; 212 } 213 $('#reg .loading').css('display', 'none'); 214 }, 215 async : false 216 }); 217 } 218 return flag; 219 } 220 221 222 //密码验证 223 $('form').form('pass1').bind('focus', function () { 224 $('.info-pass1').show().next().hide().next().hide(); 225 }).bind('blur', function () { 226 if ($(this).value() == '') { 227 $('.info-pass1').hide(); 228 } else { 229 if (check_pass(this)) { 230 231 $('.info-pass1').hide().next().next().show(); 232 } else { 233 234 $('.info-pass1').hide().next().show(); 235 } 236 } 237 }).bind('keyup', function () { 238 check_pass(this); 239 }); 240 // function check_pass1 (){ 241 // if(check_pass($('form').form('pass1').first())) return true; 242 // } 243 //密码验证函数 244 function check_pass(_this) { 245 var value = $(_this).value(); 246 var value_length = value.length; 247 var code_length = 0; 248 var flag = false; 249 //判断密码是否符合三个要求 250 if (value_length >= 6 && value_length <= 20 && !/\s/.test(value)) { 251 $('.info-pass1 .q1').html('●').css('color', 'green'); 252 } else { 253 $('.info-pass1 .q1').html('○').css('color', '#666'); 254 } 255 if (value_length > 0 && !/\s/.test(value)) { 256 $('.info-pass1 .q2').html('●').css('color', 'green'); 257 } else { 258 $('.info-pass1 .q2').html('○').css('color', '#666'); 259 } 260 261 //判断密码的种类和安全级别 262 if (/[a-z]/.test(value)) { 263 code_length++; 264 } 265 if (/[A-Z]/.test(value)) { 266 code_length++; 267 } 268 if (/[0-9]/.test(value)) { 269 code_length++; 270 } 271 if (/[^a-zA-Z0-9\s]/.test(value)) { 272 code_length++; 273 } 274 if (code_length >= 2) { 275 $('.info-pass1 .q3').html('●').css('color', 'green'); 276 } else { 277 $('.info-pass1 .q3').html('○').css('color', '#666'); 278 } 279 //显示安全级别 280 if (code_length >= 3 && value_length >= 10) { 281 $('.info-pass1 .s1').css('color', 'green'); 282 $('.info-pass1 .s2').css('color', 'green'); 283 $('.info-pass1 .s3').css('color', 'green'); 284 $('.info-pass1 .s4').html('高').css('color', 'green'); 285 } else if (code_length >= 2 && value_length >= 8) { 286 $('.info-pass1 .s1').css('color', '#f60'); 287 $('.info-pass1 .s2').css('color', '#f60'); 288 $('.info-pass1 .s3').css('color', '#ccc'); 289 $('.info-pass1 .s4').html('中').css('color', '#f60'); 290 } else if (code_length >= 1) { 291 $('.info-pass1 .s1').css('color', 'maroon'); 292 $('.info-pass1 .s2').css('color', '#ccc'); 293 $('.info-pass1 .s3').css('color', '#ccc'); 294 $('.info-pass1 .s4').html('低').css('color', 'maroon'); 295 } else { 296 $('.info-pass1 .s1').css('color', '#ccc'); 297 $('.info-pass1 .s2').css('color', '#ccc'); 298 $('.info-pass1 .s3').css('color', '#ccc'); 299 $('.info-pass1 .s4').html(' ').css('color', '#ccc'); 300 } 301 302 //返回密码是否符合要求 303 if (value_length >= 6 && value_length <= 20 && code_length >= 2 && !/\s/.test(value)) flag = true; 304 return flag; 305 306 } 307 308 //二次密码 309 $('form').form('pass2').bind('focus', function () { 310 $('.info-pass2').show().next().hide().next().hide(); 311 }).bind('blur', function () { 312 if ($(this).value() == '') { 313 $('.info-pass2').hide(); 314 } else if (check_pass2()) { 315 316 $('.info-pass2').hide().next().next().show(); 317 } else { 318 $('.info-pass2').hide().next().show(); 319 } 320 }); 321 function check_pass2(){ 322 if(trim( $('form').form('pass2').value()) == trim($('form').form('pass1').value())) return true; 323 } 324 //回答 325 $('form').form('ans').bind('focus', function () { 326 $('.info-ans').show().next().hide().next().hide(); 327 }).bind('blur', function () { 328 if ($(this).value() == '') { 329 $('.info-ans').hide(); 330 } else if (check_ans()) { 331 $('.info-ans').hide().next().next().show(); 332 } else { 333 $('.info-ans').hide().next().show(); 334 } 335 }); 336 function check_ans(){ 337 if(trim($('form').form('ans').value()).length >= 2 && trim($('form').form('ans').value()).length <= 32) return true; 338 } 339 340 $('form').form('ques').bind('change',function(){ 341 if(check_ques()) $('.error-ques').hide(); 342 }) 343 function check_ques(){ 344 if($('form').form('ques').value() > 0) return true; 345 } 346 function check_email(){ 347 if(/^[\w-\.]+@[\w-]+(\.[a-zA-Z]{2,4}){1,2}$/.test($('form').form('email').value())) return true; 348 } 349 //电子邮件 350 $('form').form('email').bind('focus', function () { 351 if ($(this).value().indexOf('@') == -1) $('.all-email').show(); 352 $('.info-email').show().next().hide().next().hide(); 353 }).bind('blur', function () { 354 $('.all-email').hide(); 355 356 if ($(this).value() == '') { 357 $('.info-email').hide(); 358 } else if (check_email()) { 359 360 $('.info-email').hide().next().next().show(); 361 } else { 362 363 $('.info-email').hide().next().show(); 364 } 365 }).bind('keyup', function (event) { //电子邮件显示补全 366 if ($(this).value().indexOf('@') == -1) { 367 $('.all-email').show(); 368 $('.all-email li span').html($(this).value()); 369 } else { 370 $('.all-email').hide(); 371 } 372 $('.all-email li').css('background', '#fff'); 373 $('.all-email li').css('color', '#666'); 374 if (event.keyCode == 40) { 375 if (this.index == undefined || this.index >= $('.all-email li').length() - 1) { 376 this.index = 0; 377 } else { 378 this.index++; 379 } 380 $('.all-email li').eq(this.index).css('background', '#E5EDF2').css('color', '#666'); 381 382 } 383 if (event.keyCode == 38) { 384 if (this.index == undefined || this.index <= 0) { 385 this.index = $('.all-email li').length() - 1; 386 } else { 387 this.index--; 388 } 389 $('.all-email li').eq(this.index).css('background', '#E5EDF2').css('color', '#666'); 390 391 } 392 if (event.keyCode == 13) { 393 $(this).value($('.all-email li').eq(this.index).text()); 394 $('.all-email').hide(); 395 this.index = undefined; 396 } 397 398 }); 399 400 //电子邮件选定补全 401 $('form .all-email li').bind('mousedown', function () { 402 $('form').form('email').value($(this).text()); 403 }) 404 405 406 //日期 407 var year = $('form').form('year'); 408 var month = $('form').form('month'); 409 var day = $('form').form('day'); 410 411 // 412 for (var i = 1950; i <= 2013; i++) { 413 //使用 Option 构造函数创建: new Option("文本","值") ; 414 415 year.first().add(new Option(i, i), undefined); 416 } 417 // 418 for (var i = 1; i <= 12; i++) { 419 month.first().add(new Option(i, i), undefined); 420 } 421 // 422 var day30 = [4, 6, 9 , 11]; 423 var day31 = [1, 3, 5, 7, 8, 10, 12]; 424 year.bind('change', select_day); 425 month.bind('change', select_day); 426 //年月日检测 427 function check_birthday() { 428 if (year.value() != 0 && month.value() != 0 && day.value() != 0) return true; 429 } 430 //选择日后自动消失 431 day.bind('change', function () { 432 if (check_birthday()) $('.error-birthday').css('display', 'none'); 433 }); 434 function select_day() { 435 if (month.value() != 0 && year.value() != 0) { 436 var cur_day = 0; 437 if (inArray(day31, parseInt(month.value()))) { 438 cur_day = 31; 439 } else if (inArray(day30, parseInt(month.value()))) { 440 cur_day = 30; 441 } else { 442 if ((parseInt(year.value()) % 4 == 0 && parseInt(year.value()) % 100 != 0) 443 || parseInt(year.value()) % 400 == 0) { 444 cur_day = 29; 445 } else { 446 cur_day = 28; 447 } 448 } 449 day.first().options.length = 1; 450 for (var i = 1; i <= cur_day; i++) { 451 day.first().add(new Option(i, i), undefined); 452 } 453 } else { 454 day.first().options.length = 1; 455 } 456 } 457 458 //判断某一值是否存在某个数组里 459 function inArray(array, value) { 460 for (var i in array) { 461 if (array[i] == value) return true; 462 } 463 return false; 464 } 465 466 467 //输入字符提示 468 $('form').form('ps').bind('keyup',function(){ 469 check_clear(this); 470 471 }); 472 function check_clear(_this){ 473 var value = $(_this).value(); 474 var value_lenght = value.length; 475 var num = 200-value_lenght; 476 if(num >= 0){ 477 $(_this).next().next().show().find('.num').html(num); 478 $(_this).next().next().next().hide(); 479 return true; 480 }else{ 481 482 $(_this).next().next().hide().next().show().find('.num').html(Math.abs(num)); 483 return false; 484 } 485 } 486 //字符清理 487 $('#reg .m-tb-reg .clear').click(function(){ 488 $('form').form('ps').value($('form').form('ps').value().substring(0,200)); 489 check_clear($('form').form('ps').first()); 490 }) 491 492 493 //表单提交 494 $('form').form('sub').click(function(){ 495 var flag = true ; 496 if(!check_clear($('form').form('ps').first())){ 497 flag = false ; 498 } 499 if(!check_user()){ 500 $('.info-user').hide().next().show(); 501 flag = false ; 502 } 503 if(!check_pass($('form').form('pass1').first())){ 504 $('.error-pass1').show(); 505 flag = false ; 506 } 507 508 if(!check_pass2()){ 509 $('.error-pass2').show(); 510 flag = false ; 511 } 512 if(!check_ques()){ 513 $('.error-ques').show(); 514 flag = false ; 515 } 516 if(!check_ans()){ 517 $('.error-ans').show(); 518 flag = false ; 519 } 520 if(!check_email()){ 521 $('.error-email').show(); 522 flag = false ; 523 } 524 if(!check_birthday()){ 525 $('.error-birthday').show(); 526 flag = false ; 527 } 528 if (flag) { 529 var _this = this; 530 $('#loading').css('display', 'block').center(200, 40); 531 $('#loading p').html('正在提交注册中...'); 532 _this.disabled = true; 533 $(_this).css('backgroundPosition', 'right'); 534 ajax({ 535 method : 'post', 536 url : 'add.php', 537 data : $('form').eq(0).serialize(), 538 success : function (text) { 539 if (text == 1) { 540 $('#loading').css('display', 'none'); 541 $('#success').css('display', 'block').center(200, 40); 542 $('#success p').html('注册成功,请登录...'); 543 setTimeout(function () { 544 $('#success').css('display', 'none'); 545 $login.hide(); 546 $('#reg .succ').css('display', 'none'); 547 $('form').first().reset(); 548 _this.disabled = false; 549 $(_this).css('backgroundPosition', 'left'); 550 screen.animate({ 551 attr : 'o', 552 target : 0, 553 t : 30, 554 step : 10, 555 fn : function () { 556 shade.hide(); 557 } 558 }); 559 }, 1500); 560 } 561 }, 562 async : true 563 }); 564 } 565 }) 566 567 568 //轮播 初始化 569 $('.js-sld img').opacity(0); 570 $('.js-sld img').eq(0).opacity(100); 571 $('.js-sld ul li').css('color','#ccc').eq(0).css('color','#0066ff'); 572 573 //轮播计数器 574 var banner_index = 1; 575 //图片张数 576 var banner_length = $('.js-sld img').length(); 577 //类型 578 var banner_type = 1; 579 //轮播自动切换 580 581 var banner_thimer = setInterval(banner_fn,3000); 582 //轮播手动切换 583 $('.js-sld ul li').hover(function(){ 584 585 clearInterval(banner_thimer) ; 586 if ($(this).css('color') != 'rgb(0, 102, 255)' && $(this).css('color') != '#0066ff') { 587 //如果鼠标移上的下标是当前这张,那么不执行动画 588 banner(this, banner_index == 0 ? $('.js-sld ul li').length() - 1 : banner_index - 1); 589 } 590 591 },function(){ 592 //轮播自动切换 593 banner_index = $(this).index() + 1; 594 banner_thimer = setInterval(banner_fn,3000); 595 }); 596 597 598 599 function banner(obj,prev){ 600 $('.js-sld ul li').css('color','#ccc'); 601 $('.js-sld ul li').eq($(obj).index()).css('color','#0066ff'); 602 $('.sld-text').html($('.js-sld img').eq($(obj).index()).attr('alt')); 603 604 if(banner_type == 1){ 605 $('.js-sld img').eq(prev).animate({ 606 attr : 'o', 607 target : 0, 608 t : 30, 609 step : 10 610 }).css('zIndex', 1); 611 $('.js-sld img').eq($(obj).index()).animate({ 612 attr : 'o', 613 target : 100, 614 t : 30, 615 step : 10 616 }).css('zIndex', 2); 617 }else if(banner_type == 2){ 618 //将上一张的层级改为1,并用动画的形式 将TOP值改为 150, 这里做成动画 跟当前显示的图片动画的配合, 才有整体UL向下移动的动画效果 619 $('.js-sld img').eq(prev).css('zIndex', 1).opacity(100).animate({ 620 attr : 'y', 621 target : 150, 622 t : 30, 623 step : 10 624 }); 625 //将当前这张的层级改为2 先将要显示的图片CSS TOP值强制改为 -150 然后会调用aimate 这个方法, 会将显示的图片TOP值 用动画的形式改为0, 就有了从上到下的动画过程。 626 $('.js-sld img').eq($(obj).index()).css('top','-150px').css('zIndex', 2).opacity(100).animate({ 627 attr : 'y', 628 target : 0, 629 t : 30, 630 step : 10 631 }); 632 } 633 634 635 } 636 function banner_fn(){ 637 if(banner_index > banner_length-1 ) banner_index = 0; 638 //eq返回BS对象,但是传BS对象会出错,所以使用first 返回原生对象 639 banner($('.js-sld img').eq(banner_index).first(), banner_index == 0 ? $('.js-sld ul li').length() - 1 : banner_index - 1); 640 banner_index++; 641 } 642 643 644 645 //延迟加载 646 //得到图片的集合并保持,有利于网页性能 647 var wait_load = $('.js-wait-load'); 648 var wait_length = wait_load.length(); 649 $(window).bind('scroll', _wait_load); 650 $(window).bind('resize', _wait_load); 651 //将所有的IMG透明度设置为0 652 wait_load.opacity(0); 653 654 function _wait_load() { 655 //使用定时器提高代码性能。 避免目标抖动 656 setTimeout(function(){ 657 // alert(i+'-----'+wait_load.length()+'----'+$(wait_load.ge(i)).attr('xsrc')); 658 for(var i =0 ; i< wait_length; i++){ 659 var _this = wait_load.ge(i); //必须先保存每个img的原生对象, 否则只能得到1个对象,而不是12个 660 // if((getInner().height + getScroll().top) >= offsetTop(_this)){ 661 // $(_this).attr('src',$(_this).attr('xsrc')).opacity(100); 662 // } 663 if ((getInner().height + getScroll().top) >= offsetTop(_this)) { 664 $(_this).attr('src', $(_this).attr('xsrc')).animate({ 665 attr : 'o', 666 target : 100, 667 t : 30, 668 step : 10 669 }); 670 } 671 } 672 },100); 673 } 674 675 676 677 678 679 //图片预加载 680 //拖拽对话框 681 $('#photo-big').drag($('#photo-big').find('h2').ge(0)); 682 683 //图片弹窗 684 var photo_big = $('#photo-big'); 685 photo_big.center(620, 511).resize(function () { 686 687 }); 688 689 $('.js-wait-load').click(function(){ 690 $('#photo-big').center(620, 511); 691 $('#photo-big').show(); 692 shade.show().animate({ 693 attr: 'o', 694 target: 30, 695 step: 1, 696 t: 50 697 698 }); 699 document.documentElement.style.overflow = 'hidden'; 700 //替换地址为loding图片 701 $('#photo-big .big img').attr('src', 'img/loading.gif').css('width', '32px').css('height', '32px').css('top', '190px'); 702 //图片加载.... 703 var bin_img = new Image(); 704 $(bin_img).bind('load',function(){ 705 //当图片在后台加载完毕后,淡入 706 $('#photo-big .big img').attr('src',big_src).animate({ 707 attr: 'o', 708 target: 100, 709 t: 30, 710 step: 1 711 }).css('width', '600px').css('height', '450px').css('top','0px').opacity(0); 712 }); 713 //为了兼容IE 必须写在LODA下面 714 var big_src = $(this).attr('bigsrc'); 715 bin_img.src = big_src; 716 717 var children = this.parentNode.parentNode; //得到当前节点父亲的父亲 718 719 prev_next_img(children); 720 //存放当前图片的索引值 721 $(this).attr('index',$(children).index()); 722 }) 723 //鼠标移上 724 $('#photo-big .left').hover(function(){ 725 $('#photo-big .sl').animate({ 726 attr: 'o', 727 target: 50, 728 t: 30, 729 step: 1 730 }) 731 },function(){ 732 $('#photo-big .sl').animate({ 733 attr: 'o', 734 target: 0, 735 t: 30, 736 step: 1 737 }) 738 }) 739 //鼠标移上 740 $('#photo-big .right').hover(function(){ 741 $('#photo-big .sr').animate({ 742 attr: 'o', 743 target: 50, 744 t: 30, 745 step: 1 746 }) 747 },function(){ 748 $('#photo-big .sr').animate({ 749 attr: 'o', 750 target: 0, 751 t: 30, 752 step: 1 753 }) 754 }) 755 //上一张 756 $('#photo-big .left').click(function(){ 757 //替换地址为loding图片 758 $('#photo-big .big img').attr('src', 'img/loading.gif').css('width', '32px').css('height', '32px').css('top', '190px'); 759 //创建IMG对象 760 var current_img = new Image(); 761 $(current_img).bind('load', function () { 762 //当图片加载到缓存完成后,执行这个动画 763 $('#photo-big .big img').attr('src',current_img.src).animate({ 764 attr: 'o', 765 target: 100, 766 t: 30, 767 step: 1 768 }).css('width', '600px').css('height', '450px').css('top','0px').opacity(0); 769 770 }); 771 //为了兼容IE SRC地址得放在LODA方法下面 772 current_img.src = $(this).attr('src') ; 773 //应该先取地址后再改地址。 774 // 得到IMG 集合对象中的 ge 方法中的父亲的父亲, 用于图片加载函数使用 775 // 使用 previndex 方法求 同级上一个 节点索引值 ,两个参数(当前的节点索引,父节点) 776 777 var children = $('.js-ad dl img').ge(prevIndex($('#photo-big .big img').attr('index'), $('.js-ad').ge(0))).parentNode.parentNode; 778 779 prev_next_img(children); 780 781 }) 782 //下一张 783 $('#photo-big .right').click(function(){ 784 //替换地址为loding图片 785 $('#photo-big .big img').attr('src', 'img/loading.gif').css('width', '32px').css('height', '32px').css('top', '190px'); 786 //创建IMG对象 787 var current_img = new Image(); 788 $(current_img).bind('load', function () { 789 //当图片加载到缓存完成后,执行这个动画 790 $('#photo-big .big img').attr('src',current_img.src).animate({ 791 attr: 'o', 792 target: 100, 793 t: 30, 794 step: 1 795 }).css('width', '600px').css('height', '450px').css('top','0px').opacity(0); 796 797 }); 798 //为了兼容IE SRC地址得放在LODA方法下面 799 current_img.src = $(this).attr('src') ; 800 //应该先取地址后再改地址。 801 // 得到IMG 集合对象中的 ge 方法中的父亲的父亲, 用于图片加载函数使用 802 // 使用 previndex 方法求 同级上一个 节点索引值 ,两个参数(当前的节点索引,父节点) 803 804 var children = $('.js-ad dl img').ge(nextIndex($('#photo-big .big img').attr('index'), $('.js-ad').ge(0))).parentNode.parentNode; 805 806 prev_next_img(children); 807 808 }) 809 //图片预加载函数 810 function prev_next_img(children){ 811 //加载上一张 和下一张到缓存中 812 var prev_img = new Image(); 813 var next_img = new Image(); 814 prev = prevIndex($(children).index(),children.parentNode); //得到上一个索引 和下一个索引 815 next = nextIndex($(children).index(),children.parentNode); 816 817 //上一张的地址和下一张的地址 818 prev_img.src = $('.js-ad dl').eq(prev).find('img').attr('bigsrc'); 819 next_img.src = $('.js-ad dl').eq(next).find('img').attr('bigsrc'); 820 821 //将上一张和下一张图片地址存在SPAN按钮中 822 $('#photo-big .left').attr('src',prev_img.src); 823 $('#photo-big .right').attr('src',next_img.src); 824 //将 当前显示的小图片图片INDEX 存放到 大图IMG 825 $('#photo-big .big img').attr('index', $(children).index()); 826 //显示张数 827 828 $('#photo-big .index').html(parseInt($(children).index()) + 1+'/'+ $('.js-ad dl').length()); 829 } 830 831 832 //调用AJAX 833 834 835 });

 

posted @ 2015-04-25 17:57  晚秋ing  阅读(454)  评论(0编辑  收藏  举报