scroll 事件绑定
var animateBlock={
isVisiable:function(el,wh,st,delta){
delta=delta||200;
//console.log($(el).offset().top,wh,st,delta)
return $(el).offset().top<wh+st-delta;
},
animations:{
band:function(wh,st){
var $el=$("#band");
if(animateBlock.isVisiable($el,wh,st)){
//background:time:0-500.o
//text:time:500-733.o.p:10px;
//menu:time:633-900.o.p:-10px;
$("#js-band-bg").animate({opacity:1},500);
$("#js-band-text").delay(500).animate({top:330,opacity:1},233);
$("#js-header").delay(633).animate({top:0,opacity:1},267);
delete animateBlock.animations.band;
}
},
character:function(wh,st){
var $el=$("#characters");
if(animateBlock.isVisiable($el,wh,st)){
$el.find(".char-icon1").animate({top:50,opacity:1},333);
$el.find(".char-icon2").delay(200).animate({top:50,opacity:1},533);
$el.find(".char-icon3").delay(400).animate({top:50,opacity:1},733);
delete animateBlock.animations.character;
}
},
intro1:function(wh,st){
var $el=$("#intro1");
if(animateBlock.isVisiable($el,wh,st)){
//console.log("trigger intro1 animate");
$el.find(".intro1-video").animate({
"bottom":0,
opacity:1
},500);
$el.find(".intro1-text").delay(167).animate({opacity:1},500);
$el.find(".intro1-star").delay(333).animate({opacity:1},333);
delete animateBlock.animations.intro1;
}
},
intro2:function(wh,st){
var $el=$("#intro2");
if(animateBlock.isVisiable($el,wh,st)){
//console.log("trigger intro2 animate");
$el.find(".intro2-computer1").animate({
"top":-30,
opacity:1
},500);
$el.find(".intro2-computer2").delay(500).animate({
opacity:1
},167);
$el.find(".intro2-text").delay(167).animate({opacity:1},500);
delete animateBlock.animations.intro2;
}
},
intro3:function(wh,st){
var $el=$("#intro3");
if(animateBlock.isVisiable($el,wh,st)){
//console.log("trigger intro3 animate");
$el.find(".intro3-calendar").animate({
"top":-31,
opacity:1
},333);
$el.find(".intro3-rockets").delay(233).animate({
"top":-46,
opacity:1
},267);
$el.find(".intro3-smoke").delay(333).animate({
"top":-31,
opacity:1
},334);
$el.find(".intro3-text").delay(167).animate({opacity:1},500);
delete animateBlock.animations.intro3;
}
},
intro4:function(wh,st){
var $el=$("#intro4");
if(animateBlock.isVisiable($el,wh,st)){
//console.log("trigger intro4 animate");
$el.find(".intro4-hand").animate({
"top":-30,
opacity:1
},500);
$el.find(".intro4-icon").delay(333).animate({
opacity:1
},333);
$el.find(".intro4-text").delay(167).animate({opacity:1},500);
delete animateBlock.animations.intro4;
}
}
}
}
$(window).on("scroll",function(){
var animations,
name,
winHeight=$(window).height(),
scrollTop=$(window).scrollTop();
animations=animateBlock.animations;
for(name in animations){
animations[name](winHeight,scrollTop);
}
});
if($(window).height()>500){
$(document).trigger("scroll");
}
scroll 事件绑定的更多相关文章
- 关于如何绑定Jquery 的scroll事件(兼容浏览器 Wookmark瀑布流插件)
做一个随屏幕滚动的导航条时,发现一个问题: 火狐.谷歌.ie9正常,ie8.7.6页面滚动时,导航条没有反应. 代码如下: $(document).bind("scroll",fu ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jQuery-1.9.1源码分析系列(十) 事件系统——事件绑定
事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...
- JQuery实现click事件绑定与触发方法分析
原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...
- 关于scroll无法绑定的问题
关于jQuery的scroll([[data],fn])事件, 概述是:当用户滚动指定的元素(元素包括:所有可滚动的元素和 window 对象)时,会触发该事件. 如绑定窗口对象: $(window) ...
- “如何稀释scroll事件”引出的问题
背景:我在segmentfault提了个问题如何稀释onscroll事件,问题如下: 面试时问到这个问题,是这样的: 面试官问一个关于滚动到某个位置的时候出现一个顶部的导航栏,答完之后,她接着问 ...
- 事件绑定之.bind()
.bind(eventType[,eventData],handler(eventObject)) 描述:为一个元素绑定一个事件处理程序,bind()绑定方法的时候元素必须已经存在. -eventTy ...
- jQuery的三种bind/One/Live/On事件绑定使用方法
本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要的朋友参考下 今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQ ...
- JQuery的方便之处——宽高设置、坐标值和滚动条+事件绑定机制
1.元素的宽高 可以通过css来进行设置,例如:$("元素").css({"宽度":"值","高度":"值&q ...
随机推荐
- Hibernate O/R Mapping模拟
作为SSH中的重要一环,有必要理解一下Hibernate对 O/R Mapping的实现. 主要利用java的反射机制来得到完整的SQL语句. 准备工作: 1. Object Student实体类: ...
- PIX的使用
这几天pix的一个问题可坑死我了,之前用的时候有蓝色的链接,点过去就可以查看相应资源,后来都是黑色的了没有可以点的链接. 看文档翻来翻去也没进展,后来找到了, 先打开render那个窗口 这样even ...
- NGP处理包
NGP处理部分(主要就是这个RunOnce函数,客户单肯定是开个线程取调用这个RunOnce的) void NGP::RunOnce() { m_spTimerFac->driveTimer() ...
- javascript陷阱,一不小心你就中招了
- 使用 Microsoft Word 发布博客文章
以 Microsoft Word 2010 为例: 依次选择:文件 -> 保存并发送 -> 发布为博客文章 配置说明:新建账户 的 博客文章 URL 一栏填写 http://rpc.cn ...
- Sqli-labs less 28
Less-28 本关考察内容与27关没有太大的差距,我们直接给出一个payload: http://127.0.0.1/sqllib/Less-28/?id=100')union%a0select(1 ...
- 无网络centos7中部署kubernetes
本文提供的kubernetes1.1实际为kubernetes0.8,最新kubernetes部署方式见下一篇文章:centos下kubernetes+flannel部署. 一.部署环境信息: 1)m ...
- F.I.S本地环境的搭建教程
一.准备开发环境: 1.安装JRE 2.安装nodejs 最好是msi文件,比较省事. 3.(如果是PHP项目)安装php. 首先下载php(我的是5.5.15版本,win7 64位系统) zip,然 ...
- 用VBS将PPT转为图片
'使用方法:把ppt文件拖放到该文件上. '机器上要安装Powerpoint程序 On Error Resume Next Set ArgObj = WScript.Arguments pptfile ...
- HDU 2126 Buy the souvenirs (01背包,输出方案数)
题意:给出t组数据 每组数据给出n和m,n代表商品个数,m代表你所拥有的钱,然后给出n个商品的价值 问你所能买到的最大件数,和对应的方案数.思路: 如果将物品的价格看做容量,将它的件数1看做价值的话, ...