Skip to content

Instantly share code, notes, and snippets.

@imsobear

imsobear/new.js

Last active December 22, 2015 04:58
Show Gist options
  • Save imsobear/6420309 to your computer and use it in GitHub Desktop.
Save imsobear/6420309 to your computer and use it in GitHub Desktop.
Download ZIP
新人引导页动画的js代码，基于kissy的，代码也不太整齐，有需求的朋友可以看一下。
Raw
new.js
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:
}
}
});
});
@imsobear
Copy link
Author

imsobear commented Sep 3, 2013

页面效果： 新人引导页动画

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment