Last active
December 22, 2015 04:58
-
-
Save imsobear/6420309 to your computer and use it in GitHub Desktop.
新人引导页动画的js代码，基于kissy的，代码也不太整齐，有需求的朋友可以看一下。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| KISSY.use('node, ua, ajax', function(S, Node, UA, ajax) { | |
| S.ready(function(S) { | |
| var $ = S.all, | |
| es = {}, //所有的元素 | |
| anim = {}, //所有的动画 | |
| datas = {}, | |
| cutting = false, | |
| ie_target = false, | |
| func, | |
| height = parseInt($(window).height(), 10), | |
| width = parseInt($(window).width(), 10), | |
| screen = Math.ceil($(window).scrollTop() / height) + 1, | |
| isDown = true; | |
| es = { | |
| fly: $('.fly'), | |
| goods: $('.goods'), | |
| // 第二屏 | |
| word_s_f: $('.word-02-1'), | |
| word_s_s: $('.word-02-2'), | |
| search_s: $('.search'), | |
| search_w: $('.search-words'), | |
| search_s_s: $('.search-02-1'), | |
| goods_s: $('.goods-02'), | |
| shirt_s: $('.shirt-02'), | |
| // 第三屏 | |
| box: $('#box'), | |
| img_t_a: $('.img-03-a'), | |
| btn_t_a: $('.btn-03-a'), | |
| shirt_t: $('.shirt-03'), | |
| shirt_t_f: $('.shirt-03-1'), | |
| shirt_f: $('.shirt-04'), | |
| // 第四屏 | |
| item_fo: $('.item-4'), | |
| cart_f: $('.cart'), | |
| word_f_f: $('.word-04-1'), | |
| word_f_s: $('.word-04-2'), | |
| note_f: $('.note'), | |
| word_f: $('.word-04'), | |
| cloud_f: $('.cloud'), | |
| // 第五屏 | |
| item_fi: $('.item-5'), | |
| hand_fi: $('.hand-05'), | |
| mouse_fi: $('.mouse-05-a'), | |
| shirt_fi: $('.shirt-05'), | |
| shirt_fi_s: $('.shirt-05-1'), | |
| shirt_fi_t: $('.shirt-05-2'), | |
| order_fi: $('.order-05'), | |
| // 第六屏 | |
| box_si: $('.box-06'), | |
| words_si_f: $('.words-06-1'), | |
| words_si_s: $('.words-06-2'), | |
| cloud_si: $('.cloud-06'), | |
| cloud_si_f: $('.cloud-06-1'), | |
| cloud_si_s: $('.cloud-06-2'), | |
| item_si: $('.item-6'), | |
| bus_si: $('.bus-05'), | |
| pop_si_f: $('.pop-06-1'), | |
| pop_si_s: $('.pop-06-2'), | |
| pop_si_t: $('.pop-06-3'), | |
| boy: $('.boy-06'), | |
| girl: $('.girl-06'), | |
| open: $('.door-06'), | |
| // 第七屏 | |
| star_1: $('.star-07-1'), | |
| star_2: $('.star-07-2'), | |
| star_3: $('.star-07-3'), | |
| star_4: $('.star-07-4'), | |
| star_5: $('.star-07-5'), | |
| good_se: $('.good-07'), | |
| // 第八屏 | |
| hand_e: $('.hand-08'), | |
| next: $('.next') | |
| }; | |
| //标记各动画是否已执行 | |
| datas = { | |
| f_f: false, | |
| s_f: false, | |
| t_f: false, | |
| fo_f: false, | |
| fi_f: false, | |
| si_f: false, | |
| si_isMod: false, | |
| se_f: false | |
| }; | |
| function h(num) { | |
| return height * num; | |
| } | |
| function w(num) { | |
| return width * num; | |
| } | |
| anim = { | |
| //初始化 | |
| init: function() { | |
| $(window).animate({'scrollTop': 0}, 1); | |
| if (height < 600) { | |
| // $(window).animate({'scrollTop': 600 - height}, 0.2); | |
| height = 600; | |
| } | |
| $('.item').css('height', height); | |
| $('#' + screen + ' .b').show(); | |
| if (S.UA.ie && S.UA.ie < 8) { | |
| /// ie7-下的背景图片位置修正 | |
| es.item_si.css('background-position-x', w(0.25) - 625 + 'px'); | |
| ie_target = w(1) - 2500 + 'px'; | |
| $('.item-4').css('background-position-x', w(0.5) - 1000 + 'px'); | |
| } | |
| $('.btn-08').css('height', h(1) - 365); | |
| }, | |
| //延时函数 | |
| delay: function (func, time) { | |
| setTimeout(func, time * 1000); | |
| }, | |
| // 显示下一步按钮 | |
| showNext: function() { | |
| es.next.animate({'opacity': 1}, 0.3, 'backBoth').addClass('next_updown'); | |
| }, | |
| hideNext: function() { | |
| es.next.animate({'opacity': 0}, 0.3, 'easeNone', function() { | |
| es.next.removeClass('next_updown'); | |
| }); | |
| }, | |
| //切换窗口 | |
| cut: function(screen, func) { | |
| anim.hideNext(); | |
| cutting = true; | |
| $(window).animate({'scrollTop': height * (screen - 1)}, 1, 'easeNone', function() { | |
| cutting = false; | |
| if (func) { | |
| func(); | |
| } else if (!func && screen != 8) { | |
| // 没有回调函数说明该屏动画已执行结束，所以显示下一步按钮 | |
| anim.showNext(); | |
| } | |
| }); | |
| }, | |
| //第一屏 | |
| '1': function() { | |
| es.fly.animate({'right': '20%'}, 2, 'easeIn', function() { | |
| es.goods.animate({'opacity': '1'}, 0.6, 'easeIn', function() { | |
| // 动画播放完毕 | |
| // 衣服漂浮 && 点击跳到下一屏 | |
| // 下一步出现 | |
| anim.showNext(); | |
| datas.f_f = true; | |
| }); | |
| $('.shirt01').animate({'opacity': '1'}, 0.6).addClass('shirt_updown'); | |
| }); | |
| }, | |
| //第二屏 | |
| '2': function() { | |
| // 搜索框 | |
| anim.delay(function() { | |
| es.search_s.show().animate({'right': 370}, 1, 'easeIn', function() { | |
| // 搜索文字 | |
| es.search_w.animate({'opacity': '1'}, 0.7, 'easeNone', function(){ | |
| // 搜索框上移 | |
| es.word_s_f.hide(); | |
| es.search_s.hide(); | |
| es.search_s_s.show().animate({'bottom': 452, 'right': 250, 'height': 30}, 0.7); | |
| // 衣物出现 | |
| es.word_s_f.hide(); | |
| es.word_s_s.animate({'opacity': 1}, 0.5); | |
| es.goods_s.show().animate({'height': 218}, 0.7, 'easeIn', function() { | |
| anim.showNext(); | |
| datas.s_f = true; | |
| }, 0.2); | |
| }); | |
| }); | |
| }, 0.2); | |
| }, | |
| //第三屏 | |
| '3': function() { | |
| anim.delay(function() { | |
| // 图片替换 | |
| es.img_t_a.show(); | |
| }, 0.4); | |
| anim.delay(function() { | |
| // 按钮替换 | |
| es.btn_t_a.show(); | |
| anim.showNext(); | |
| datas.t_f = true; | |
| }, 1.1); | |
| }, | |
| //第四屏 | |
| '4': function() { | |
| // if(S.UA.ie < 9) { | |
| es.cart_f.css('left', es.cart_f.offset()['left'] + 250 + 'px'); | |
| // } | |
| //购物车 | |
| anim.delay(function() { | |
| es.cart_f.animate({'left': w(1.2)}, 1.5, 'easeIn', function() { | |
| es.cart_f.hide(); | |
| }); | |
| }, 0.2); | |
| anim.delay(function() { | |
| es.word_f_f.hide(); | |
| es.word_f_s.show(); | |
| // 笔记本 | |
| es.note_f.animate({'opacity': 1}, 1, 'easeNone', function() { | |
| // 笔记本内的文字 | |
| es.word_f.animate({'opacity': 1}, 0.5, 'easeNone', function() { | |
| anim.showNext(); | |
| datas.fo_f = true; | |
| }); | |
| }); | |
| }, 1.6); | |
| }, | |
| //第五屏 | |
| '5': function() { | |
| anim.delay(function() { | |
| // 手 | |
| es.hand_fi.show().animate({'bottom': 0}, 0.8, 'easeIn', function() { | |
| es.mouse_fi.show(); | |
| // T恤下落第一阶段 | |
| es.shirt_fi.show().animate({'bottom': 204}, 1, 'easeNone', function() { | |
| es.shirt_fi.hide(); | |
| // T恤下落第二阶段 | |
| es.shirt_fi_s.show().animate({'bottom': 70}, 0.5); | |
| // 订单 | |
| es.order_fi.show().animate({'bottom': 390}, 0.8, 'easeNone', function() { | |
| anim.showNext(); | |
| datas.fi_f = true; | |
| }); | |
| }); | |
| }); | |
| }, 0.2); | |
| }, | |
| // 第六屏 | |
| '6': function() { | |
| anim.delay(function() { | |
| // 箱子掉入后汽车才可以运动 | |
| es.item_si.animate({'background-position': (ie_target || '100%') + ' 100%'}, 3, 'easeBoth', function() { | |
| // boy | |
| es.boy.show().animate({'bottom': 116, 'height': 305}, 1.5); | |
| // 文案2 | |
| es.words_si_s.animate({'opacity': 1}, 0.5); | |
| // if(!datas.si_isMod) { | |
| // datas.si_isMod = true; | |
| // 矫正位置 | |
| es.boy.css('right', w(1) - es.boy.offset()['left'] + 'px'); | |
| // } | |
| es.boy.animate({'right': 500}, 1, 'easeNone', function() { | |
| es.pop_si_t.show(); | |
| anim.showNext(); | |
| datas.si_f = true; | |
| }); | |
| //girl | |
| anim.delay(function() { | |
| es.open.show(); | |
| anim.delay(function() { | |
| es.girl.show().animate({'height': 305, 'right': 350}, 1); | |
| }, 0.2); | |
| }, 1.0); | |
| }); | |
| // 文案1 | |
| es.words_si_f.animate({'left': '-5%', 'opacity': '0'}, 3, 'easeBoth'); | |
| es.cloud_si.animate({'left': '10%'}, 3, 'easeBoth'); | |
| // pop1 | |
| anim.delay(function() { | |
| es.pop_si_f.show(); | |
| }, 0.2); | |
| // pop1 | |
| anim.delay(function() { | |
| es.pop_si_f.hide(); | |
| }, 1.0); | |
| // pop2 | |
| anim.delay(function() { | |
| es.pop_si_s.show(); | |
| }, 1.5); | |
| // cloud | |
| anim.delay(function() { | |
| es.cloud_si_f.addClass('cloud_back_1'); | |
| es.cloud_si_s.addClass('cloud_back_2'); | |
| }, 1.8); | |
| }, 0.8); | |
| }, | |
| // 第七屏 | |
| '7': function() { | |
| anim.delay(function() { | |
| // 星星们 | |
| es.star_1.show(); | |
| anim.delay(function() { | |
| es.star_2.show(); | |
| }, 0.2); | |
| anim.delay(function() { | |
| es.star_3.show(); | |
| }, 0.4); | |
| anim.delay(function() { | |
| es.star_4.show(); | |
| }, 0.6); | |
| anim.delay(function() { | |
| es.star_5.show(); | |
| }, 0.8); | |
| anim.delay(function() { | |
| // 好评君 | |
| es.good_se.show().animate({'width': 90}, 0.2).animate({'width': 72}, 0.2, 'easeNone', function() { | |
| anim.showNext(); | |
| datas.se_f = true; | |
| }); | |
| }, 0.9); | |
| }, 0.2); | |
| }, | |
| // 为了统一判断是否显示next | |
| '8': function() { | |
| } | |
| }; | |
| anim.init(); | |
| anim[1](); | |
| //鼠标滚轮事件 | |
| $(document).on('mousewheel', function(e) { | |
| e.preventDefault(); | |
| isDown = e.deltaY < 0; | |
| if (!cutting) { | |
| main(); | |
| } | |
| }); | |
| // 下一页事件 | |
| es.next.on('click', function() { | |
| isDown = true; | |
| main(); | |
| }); | |
| //滚动条事件 | |
| $(window).on('scroll', function(e) { | |
| screen = Math.ceil($(window).scrollTop() / height) + 1; | |
| tag = Math.round($(window).scrollTop() / height) + 1; | |
| // 改变边栏的颜色 | |
| $('.b').hide(); | |
| $('#' + tag + ' .b').show(); | |
| // 改变鼠标图片 | |
| if ($(window).scrollTop() > h(1) || $(window).scrollTop() < h(7)) { | |
| $('.ms').hide(); | |
| $('.mouse' + tag).show(); | |
| } | |
| }); | |
| // 键盘事件 | |
| $(document).on('keydown', function(e) { | |
| if (e.which == 40) { | |
| // 向下 | |
| e.halt(); | |
| isDown = true; | |
| main(); | |
| } else if (e.which == 38) { | |
| // 向上 | |
| e.halt(); | |
| isDown = false; | |
| main(); | |
| } else if (e.which == 32) { | |
| // 空格 | |
| e.halt(); | |
| isDown = true; | |
| main(); | |
| } else if (e.which == 13) { | |
| // 在第8屏按回车直接跳转 | |
| if(screen == 8) { | |
| window.location = "http://new.taobao.com"; | |
| } | |
| } | |
| }); | |
| // 最后一屏手随着鼠标动 | |
| $('.item-8').on('mousemove', function(e) { | |
| var x = e.pageX - 10, | |
| y = e.pageY - h(7) + 10; | |
| es.hand_e.css('left', x); | |
| if (y > h(1) - 449) { | |
| es.hand_e.css('bottom', h(1) - (y + 449)); | |
| } else { | |
| es.hand_e.css('bottom', 0); | |
| } | |
| }); | |
| // 最后一屏的按钮事件 | |
| $('.btn-08').on('mouseenter', function(e) { | |
| $('.btn-08-1').hide(); | |
| $('.btn-08-2').show(); | |
| }); | |
| $('.btn-08').on('mouseleave', function(e) { | |
| $('.btn-08-2').hide(); | |
| $('.btn-08-1').show(); | |
| }); | |
| $('.btn-08').on('mousedown', function(e) { | |
| $('.btn-08-2').hide(); | |
| $('.btn-08-1').hide(); | |
| $('.btn-08-3').show(); | |
| window.location = "http://new.taobao.com"; | |
| }); | |
| $('.btn-08').on('mouseup', function(e) { | |
| $('.btn-08-3').hide(); | |
| $('.btn-08-1').show(); | |
| }); | |
| // 再来一次 | |
| $('.again').on('click', function() { | |
| // 直接重新加载页面 | |
| datas = { | |
| f_f: false, | |
| s_f: false, | |
| t_f: false, | |
| fo_f: false, | |
| fi_f: false, | |
| si_f: false, | |
| si_isMod: false, | |
| se_f: false | |
| }; | |
| // 妙不可言的方法 | |
| $('*').attr('style', ''); | |
| anim.init(); | |
| anim[1](); | |
| }); | |
| // 分享 | |
| $('.share').on('click', function(e) { | |
| e.halt(); | |
| SNS.ui('share-v2',{ | |
| title: '淘宝新会员', | |
| type: 'webpage', | |
| key: 'http://www.taobao.com/go/act/vip/newer/guidepage.php', | |
| comment: '#淘宝新会员#新手买家们，欢迎来淘宝！注册、挑选、下单、付款、收货，' + | |
| '新手入门，只需5步。9亿件商品，淘尽你喜欢，淘宝为万能代言！', | |
| pic: '....', | |
| client_id: '××××××' | |
| }); | |
| }); | |
| // 第一屏的点击浮动的shirt后cut | |
| $('.shirt01').on('click', function() { | |
| if (datas.s_f) { | |
| anim.cut(2); | |
| } else { | |
| anim.cut(2, anim[2]); | |
| } | |
| }); | |
| // 每屏切换时的动画 | |
| function main() { | |
| switch (screen) { | |
| case 1: | |
| if (datas.f_f && isDown && !datas.s_f) { | |
| anim.cut(2, anim[2]); | |
| } else if (isDown && datas.s_f){ | |
| anim.cut(2); | |
| } | |
| break; | |
| case 2: | |
| if (datas.s_f && isDown && !datas.t_f) { | |
| $('.cover').show(); | |
| // T恤下移 | |
| es.shirt_s.show().animate({'bottom': 255 - height, 'left': 260, 'width': 'auto'}, | |
| 1, 'easeNone', function() { | |
| es.shirt_s.hide(); | |
| es.shirt_t_f.show(); | |
| }); | |
| anim.cut(3, anim[3]); | |
| } else if (!isDown) { | |
| // 向上滚直接返回上一页 | |
| datas.s_f = true; | |
| anim.cut(1); | |
| } else if (isDown && datas.t_f){ | |
| anim.cut(3); | |
| } | |
| break; | |
| case 3: | |
| if (datas.t_f && isDown && !datas.fo_f) { | |
| // T恤下落 | |
| es.shirt_t_f.hide(); | |
| es.shirt_t.show().animate({'bottom': 200 - h(1), 'left': 260}, | |
| 1, 'easeNone', function() { | |
| es.shirt_t.hide(); | |
| es.shirt_f.show(); | |
| }); | |
| anim.cut(4, anim[4]); | |
| } else if (!isDown) { | |
| datas.t_f = true; | |
| anim.cut(2); | |
| } else if (isDown && datas.fo_f){ | |
| anim.cut(4); | |
| } | |
| break; | |
| case 4: | |
| if (datas.fo_f && isDown && !datas.fi_f) { | |
| anim.cut(5, anim[5]); | |
| } else if (!isDown) { | |
| datas.fo_f = true; | |
| anim.cut(3); | |
| } else if (isDown && datas.fi_f) { | |
| anim.cut(5); | |
| } | |
| break; | |
| case 5: | |
| if (datas.fi_f && isDown && !datas.si_f) { | |
| es.item_fi.css('overflow', 'visible'); | |
| es.shirt_fi_s.hide(); | |
| // T恤下落 | |
| es.shirt_fi_t.show().animate({'bottom': 506-h(1), 'width': 65, 'left': '40%'}, | |
| 1, | |
| 'easeNone', | |
| function() { | |
| es.item_fi.css('overflow', 'hidden'); | |
| es.shirt_fi_t.hide(); | |
| }); | |
| // 盒子出现 | |
| es.box_si.animate({'left': '38%'}, 1, 'easeNone', function() { | |
| es.box_si.animate({'bottom': 40}, 0.6, 'easeIn', function() { | |
| es.box_si.hide(); | |
| }); | |
| }); | |
| anim.cut(6, anim[6]); | |
| } else if (!isDown) { | |
| datas.fi_f = true; | |
| anim.cut(4); | |
| } else if (isDown && datas.si_f) { | |
| anim.cut(6); | |
| } | |
| break; | |
| case 6: | |
| if (datas.si_f && isDown && !datas.se_f) { | |
| anim.cut(7, anim[7]); | |
| } else if (!isDown) { | |
| datas.si_f = true; | |
| anim.cut(5); | |
| } else if (isDown && datas.se_f) { | |
| anim.cut(7); | |
| } | |
| break; | |
| case 7: | |
| if (datas.se_f && isDown) { | |
| // es.next.hide().removeClass('next_updown'); | |
| anim.cut(8); | |
| } else if (!isDown) { | |
| datas.se_f = true; | |
| anim.cut(6); | |
| } | |
| break; | |
| case 8: | |
| if (!isDown) { | |
| // anim.delay(function() { | |
| // es.next.show(); | |
| // anim.showNext(); | |
| // }, 0.9); | |
| anim.cut(7); | |
| } | |
| break; | |
| default: | |
| } | |
| } | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
页面效果： 新人引导页动画