又一个单页滚屏组件:pageSwitch.js

移动互联网的火热发展,带来了很多产品推广传播的html5页面开发需求,而这类页面又往往以单页面滚屏(onepage-scroll)类型居多。基于业务上的需要,我开发了这个专门处理该类需求的javascript组件 – pageSwitch.js

我之前写过一个专门处理页面上幻灯、走马灯效果的组件 – Touchslider.js,支持上下左右四个方向的滚屏切换,其实它也能胜任部分这类单页滚屏操作。但是由于实现原理限制,他也只能实现了连续滚屏的效果。而在移动端上,页面不仅仅是滚动(scroll)切换,还会有各种切换转场方式,例如放大缩小,飞进飞出,翻来翻去等等……而这些效果,就是pageSwitch专注的事了。

补充一下,Touchslider和pageSwitch的不同:前者专注于滚动操作,且不限于全屏滚动(即可视容器窗口中同时可见页面数量可以不固定,具体可以参见此处例子);后者则是专注于全屏页面的切换操作,切换效果可以五花八门,参见此例

内置支持的切换效果

pageSwitch.js现在已经内置支持 106 中切换效果,其实可以支持更多,只是考虑到文件体积,不想加入太多不常用的效果。pageSwitch支持自定义切换效果,可以根据示例自行定义自己需要的效果,这个如果定义后边会讲到。

现在内置支持的效果主要分为以下几个大类:

  • fade:基于透明度(opacity)为实现的渐显渐隐效果,例子
  • slice:基于尺寸(height、width)实现的裁切效果,例子
  • scroll:基于位置(translate、top、left)实现的滚动效果,例子
  • slide:基于位置(translate、top、left)实现的滑屏效果,例子
  • flip:基于rotate变换实现的翻转效果,例子
    • flip3d:3d空间翻转,例子
    • flipPaper:翻书效果,例子
    • flipClock:翻页钟效果,例子
  • skew:基于skew变换实现的扭曲效果,例子
  • zoom:基于scale变换实现的缩放效果,例子
  • bomb:基于scale变换和透明度(opacity)实现的爆炸效果,例子

基于以上几类效果,派生出了许多微小变化的效果,共同组成了pageSwitch内置支持的效果。

如何自定义效果

除了以上组件内置支持的效果,更可以自定义自己需要的效果。自定义效果前,需要明确pageSwitch的切屏理念:

非动画阶段只有一个页面可以被看到(全屏页面的概念);动画阶段最多只有两个页面参与,即一前一后,他们分别有自己对应的进度比率,基于该比率定义页面样式以实现连续的动画。

自定义动画效果即通过定义一个函数用来处理页面样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//这里以定义一个fade动画样式来举例
pageSwitch.addTransition('fade',function(cpage,cp,tpage,tp){
    /*
     * @param HTMLElement cpage 参与动画的前序页面
     * @param Float cp 目标页面过渡比率,取值范围-1到1
     * @param HTMLElement tpage 参与动画的后序页面;如果非循环loop模式,则在切换到边缘页面时可能不存在该参数
     * @param Float tp 目标页面过渡比率,取值范围-1到1;如果非循环loop模式,则在切换到边缘页面时可能不存在该参数
     */
 
    if('opacity' in cpage.style){	//检测透明度css支持
        cpage.style.opacity=1-Math.abs(cp);
		if(tpage){
			tpage.style.opacity=Math.abs(cp);
		}
	}else{
		cpage.style.filter='alpha(opacity='+(1-Math.abs(cp))*100+')';
		if(tpage){
			tpage.style.filter='alpha(opacity='+Math.abs(cp)*100+')';
		}
	}
});
 
//如果你有jQuery类似组件,可以更简单
pageSwitch.addTransition('fade',function(cpage,cp,tpage,tp){
	$(cpage).css('opacity',1-Math.abs(cp));
	$(tpage).css('opacity',Math.abs(cp));
});

以上是自定义动画的一个简单例子,复杂的例子可以参见组件内置的 flipClock flipPaper等效果。

优缺点自谈

没有完美的东西,我自己对这个组件也有一些看法,并不是推荐大家说这个东西适用任何情况。

优点:组件定义了外部操作框架,可以很方面的实现自己需要的动画效果,并且内置了许多的效果,适用起来简单方便。

缺点:由于为了动画定义逻辑的简单,动画部分没有使用css3的transition。与原生transition动画相比,虽然已经使用了requestAnimationFrame,但是由于部分基于简化操作的原因,性能损耗是不可避免的。但是这只是在老机型上的表现,在终端性能越来强大的今天,这部分性能损耗基本可以忽略。

综上,我个人建议,如果你的页面不是大多跑到三四年前那种iphone4 android2.2等老机器上的,大可放心使用pageSwitch。

Github & Demo

pageSwitch.js

本文已经有 13 条评论,继续盖楼啦!

  1. 请教个问题,ASE不支持回复邮箱提醒吗? WordPress 3.4.1

    /* 邮件通知 by Qiqiboy */
    function comment_mail_notify($comment_id) {
    $comment = get_comment($comment_id);//根据id获取这条评论相关数据
    $content=$comment->comment_content;
    //对评论内容进行匹配
    $match_count=preg_match_all(‘//si’,$content,$matchs);
    if($match_count>0){//如果匹配到了
    foreach($matchs[1] as $parent_id){//对每个子匹配都进行邮件发送操作
    SimPaled_send_email($parent_id,$comment);
    }
    }elseif($comment->comment_parent!=’0′){//以防万一,有人故意删了@回复,还可以通过查找父级评论id来确定邮件发送对象
    $parent_id=$comment->comment_parent;
    SimPaled_send_email($parent_id,$comment);
    }else return;
    }
    add_action(‘comment_post’, ‘comment_mail_notify’);
    function SimPaled_send_email($parent_id,$comment){//发送邮件的函数 by Qiqiboy.com
    $admin_email = get_bloginfo (‘admin_email’);//管理员邮箱
    $parent_comment=get_comment($parent_id);//获取被回复人(或叫父级评论)相关信息
    $author_email=$comment->comment_author_email;//评论人邮箱
    $to = trim($parent_comment->comment_author_email);//被回复人邮箱
    $spam_confirmed = $comment->comment_approved;
    if ($spam_confirmed != ‘spam’ && $to != $admin_email && $to != $author_email) {
    $wp_email = ‘no-reply@’ . preg_replace(‘#^www\.#’, ”, strtolower($_SERVER[‘SERVER_NAME’])); // e-mail 發出點, no-reply 可改為可用的 e-mail.
    $subject = ‘您在 [‘ . get_option(“blogname”) . ‘] 的留言有了回應’;
    $message = ‘
    ‘ . trim(get_comment($parent_id)->comment_author) . ‘, 您好!
    您曾在《’ . get_the_title($comment->comment_post_ID) . ‘》的留言:’
    . trim(get_comment($parent_id)->comment_content) . ‘
    ‘ . trim($comment->comment_author) . ‘ 给你的回复:’
    . trim($comment->comment_content) . ‘
    您可以点击
    “all”))) . ‘”>查看回复的完整內容
    欢迎再度光临 ‘ . get_option(‘blogname’) . ‘
    (此邮件有系统自动发出, 请勿回复.)’;
    $from = “From: \”” . get_option(‘blogname’) . “\” “;
    $headers = “$from\nContent-Type: text/html; charset=” . get_option(‘blog_charset’) . “\n”;
    wp_mail( $to, $subject, $message, $headers );
    }
    }

  2. 嗨 Qiqiboy 我的博客志想收录你的博客
    博客志是一个用心推荐博客的部落格 受到路易大叔、龙轩、狸博窝、王商博客、龙霆工作室等众多博客的推荐。
    不知道你愿意给博客志投稿吗?(推荐博客有惊喜哦)
    博客的主人在介绍自己的博客时一定是最用心的吧
    如果不知道写点什么 能告诉我您的邮箱吗?我们来一个访谈怎么样?

发表评论 取消回复