mod.slide.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. KISSY.use('node,gallery/slide/1.2/',function(S,Node,Slide){
  2. var $=Node.all;
  3. var v_h = null;
  4. function init_pageH(){
  5. var fn_h = function() {
  6. if(document.compatMode == 'BackCompat')
  7. var Node = document.body;
  8. else
  9. var Node = document.documentElement;
  10. return Math.max(Node.scrollHeight,Node.clientHeight);
  11. }
  12. var page_h = fn_h();
  13. var m_h = $('.item').height();
  14. page_h >= m_h ? v_h = page_h : v_h = m_h ;
  15. //设置各种模块页面的高度,扩展到整个屏幕高度
  16. $('.item').height(v_h);
  17. $('.viewport').height(v_h);
  18. $('.j-slider').height(v_h);
  19. };
  20. init_pageH();
  21. window.s = new Slide('#J_slide',{
  22. contentClass:'viewport',
  23. pannelClass:'item',
  24. navClass:'pointer',
  25. triggerSelector:'span',
  26. defaultTab:1,
  27. selectedClass:'current',
  28. effect:'hSlide',
  29. touchmove:true
  30. });
  31. window.s.on('afterSwitch',function(e){
  32. $('.element-1 .phone').removeClass('animated tada');
  33. $('.element-1 .hand').removeClass('animated fadeInDown');
  34. $('.element-1 .gold').removeClass('animated fadeInUp');
  35. $('.element-1 .gift').removeClass('animated fadeInRight');
  36. $('.element-1 .text').removeClass('animated zoomIn');
  37. $('.element-2 .phone').removeClass('animated tada');
  38. $('.element-2 .building').removeClass('animated fadeInUp');
  39. $('.element-2 .floor').removeClass('animated fadeInLeft');
  40. $('.element-2 .text').removeClass('animated zoomIn');
  41. $('.element-3 .phone').removeClass('animated tada');
  42. $('.element-3 .house').removeClass('animated fadeInDown');
  43. $('.element-3 .handshake').removeClass('animated fadeInUp');
  44. $('.element-3 .message').removeClass('animated zoomInLeft');
  45. $('.element-3 .text').removeClass('animated zoomIn');
  46. $('.btn-go').removeClass('animated zoomIn');
  47. if(e.index==0){
  48. setTimeout(function(){
  49. $('.element-1 .phone').addClass('animated tada');
  50. },100);
  51. setTimeout(function(){
  52. $('.element-1 .hand').addClass('animated fadeInDown');
  53. },500);
  54. setTimeout(function(){
  55. $('.element-1 .gold').addClass('animated fadeInUp');
  56. },600);
  57. setTimeout(function(){
  58. $('.element-1 .gift').addClass('animated fadeInRight');
  59. },1000);
  60. setTimeout(function(){
  61. $('.element-1 .text').addClass('animated zoomIn');
  62. },800);
  63. }
  64. if(e.index==1){
  65. setTimeout(function(){
  66. $('.element-2 .phone').addClass('animated tada');
  67. },100);
  68. setTimeout(function(){
  69. $('.element-2 .building').addClass('animated fadeInUp');
  70. },500);
  71. setTimeout(function(){
  72. $('.element-2 .floor').addClass('animated fadeInLeft');
  73. },800);
  74. setTimeout(function(){
  75. $('.element-2 .text').addClass('animated zoomIn');
  76. },600);
  77. }
  78. if(e.index==2){
  79. setTimeout(function(){
  80. $('.element-3 .phone').addClass('animated tada');
  81. },100);
  82. setTimeout(function(){
  83. $('.element-3 .house').addClass('animated fadeInDown');
  84. },500);
  85. setTimeout(function(){
  86. $('.element-3 .handshake').addClass('animated fadeInUp');
  87. },600);
  88. setTimeout(function(){
  89. $('.element-3 .message').addClass('animated zoomInLeft');
  90. },1000);
  91. setTimeout(function(){
  92. $('.element-3 .text').addClass('animated zoomIn');
  93. },800);
  94. setTimeout(function(){
  95. $('.btn-go').addClass('animated zoomIn');
  96. },1200);
  97. }
  98. });
  99. //引导页动画
  100. setTimeout(function(){
  101. $('.element-1 .phone').addClass('animated tada');
  102. },100);
  103. setTimeout(function(){
  104. $('.element-1 .hand').addClass('animated fadeInDown');
  105. },500);
  106. setTimeout(function(){
  107. $('.element-1 .gold').addClass('animated fadeInUp');
  108. },600);
  109. setTimeout(function(){
  110. $('.element-1 .gift').addClass('animated fadeInRight');
  111. },1000);
  112. setTimeout(function(){
  113. $('.element-1 .text').addClass('animated zoomIn');
  114. },800);
  115. });