效果体验：http://keleyi.com/keleyi/phtml/html5/28.htm

以下是代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>模拟苹果ios系统页面过渡效果插件-柯乐义</title><base target="_blank" />

<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/html5/28/css/kontext.css">

<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/html5/28/css/demo.css">

</head>

<body>

<article class="keleyi">

<div class="layer one show">

<h2>整屏切换</h2>

<p>切换请点击页面下方原点或使用键盘方向键。请使用<a href="http://keleyi.com/a/bjac/g039tue3.htm">支持HTML5的浏览器</a>查看本页 <a href="http://keleyi.com">首页</a> <a href="http://keleyi.com/a/bjad/pd076s6s.htm">原文</a><br />

<a href="http://keleyi.com/game/4/"><img src="http://keleyi.com/game/4/img/bg.jpg" style="height:300px;width:300px;" /></a>

</p>

</div>

<div class="layer two">

<h2>第二层</h2>

<p><a href="http://keleyi.com/a/bjac/iqiiedy2.htm"><img src="http://keleyi.com/image/a/al25629g.jpg" /></a></p>

</div>

<div class="layer three">

<h2>第三层</h2>

<p><a href="http://keleyi.com/keleyi/phtml/"><img src="http://keleyi.com/image/a/w0l6ov6h.png" /></a></p>

</div>

</article>

<ul class="bullets">

</ul>

<script src="http://keleyi.com/keleyi/phtml/html5/28/js/kontext.js"></script>

<script>

// Create a new instance of kontext

var k = kontext( document.querySelector( '.keleyi' ) );

// API METHODS:

// k.prev(); // Show prev layer

// k.next(); // Show next layer

// k.show( 3 ); // Show specific layer

// k.getIndex(); // Index of current layer

// k.getTotal(); // Total number of layers

// DEMO-SPECIFIC:

var bulletsContainer = document.body.querySelector( '.bullets' );

// Create one bullet per layer

for( var i = 0, len = k.getTotal(); i < len; i++ ) {

var bullet = document.createElement( 'li' );

bullet.className = i === 0 ? 'active' : '';

bullet.setAttribute( 'index', i );

bullet.onclick = function( event ) { k.show( event.target.getAttribute( 'index' ) ) };

bullet.ontouchstart = function( event ) { k.show( event.target.getAttribute( 'index' ) ) };

bulletsContainer.appendChild( bullet );

}

// Update the bullets when the layer changes

k.changed.add( function( layer, index ) {

var bullets = document.body.querySelectorAll( '.bullets li' );

for( var i = 0, len = bullets.length; i < len; i++ ) {

bullets[i].className = i === index ? 'active' : '';

}

} );

document.addEventListener( 'keyup', function( event ) {

if( event.keyCode === 37 ) k.prev();

if( event.keyCode === 39 ) k.next();

}, false );

var touchX = 0;

var touchConsumed = false;

document.addEventListener( 'touchstart', function( event ) {

touchConsumed = false;

lastX = event.touches[0].clientX;

}, false );

document.addEventListener( 'touchmove', function( event ) {

event.preventDefault();

if( !touchConsumed ) {

if( event.touches[0].clientX > lastX + 10 ) {

k.prev();

touchConsumed = true;

}

else if( event.touches[0].clientX < lastX - 10 ) {

k.next();

touchConsumed = true;

}

}

}, false );

</script>

</body>

</html>

web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

ios页面过渡效果插件Kontext的更多相关文章

  1. Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面

    Xamarin.iOS - 利用Settings插件与EAIntroView制作App的欢迎界面 关于欢迎界面 很多App第一次启动都会有一个欢迎界面,欢迎界面往往决定这用户对App的第一映像,所以欢 ...

  2. iOS 通知扩展插件

    iOS 通知扩展插件 目录 iOS 通知扩展插件 Notification Service Extension 新建一个target 代码实现 注意事项 UINotificationConentExt ...

  3. iOS桌面小插件 Widget Extension

    iOS桌面小插件 Widget Extension 这个插件时iOS14以后才出现的,基于SwiftUI 旧项目新建时可能一堆错误,其中一个时要把插件target 开发sdk版本设置为14.0以上 新 ...

  4. 基于Jquery的页面过渡效果(原创)

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  5. iOS页面传值-wang

    iOS页面间传值的方式(NSUserDefault/Delegate/NSNotification/Block/单例) 实现了以下iOS页面间传值:1.委托delegate方式:2.通知notific ...

  6. iOS页面间传值的方式（Delegate/NSNotification/Block/NSUserDefault/单例）

    iOS页面间传值实现方法:1.通过设置属性,实现页面间传值:2.委托delegate方式:3.通知notification方式:4.block方式:5.UserDefault或者文件方式:6.单例模式 ...

  7. iOS页面传值方式

    普遍传值方式如下: 1.委托delegate方式: 2.通知notification方式: 3.block方式: 4.UserDefault或者文件方式: 5.单例模式方式: 6.通过设置属性,实现页 ...

  8. ios页面间传递参数四种方式

    ios页面间传递参数四种方式 1.使用SharedApplication,定义一个变量来传递. 2.使用文件,或者NSUserdefault来传递 3.通过一个单例的class来传递 4.通过Dele ...

  9. iOS页面间传值的方式（NSUserDefault/Delegate/NSNotification/Block/单例）

    iOS页面间传值的方式(NSUserDefault/Delegate/NSNotification/Block/单例) 实现了以下iOS页面间传值:1.委托delegate方式:2.通知notific ...

随机推荐

  1. HTML5_01之表单新特性

    1.WebStorm快捷键: Ctrl+Alt+(向下方向键):快速复制当前行 Alt+(向上/下方向键):移动当前行 Ctrl+D:删除当前行 Ctrl+/:快速(取消)注释当前行 Ctrl+Alt ...

  2. [译]AngularJS中DOM操作

    再翻译一篇干货短文,原文:AngularJS jQuery 虽然Angularjs将我们从DOM的操作中解放出来了,但是很多时候我们还是会需要在controller/view加载之后执行一些DOM操作 ...

  3. android 手把手教您自定义ViewGroup（一）

    1.概述 在写代码之前,我必须得问几个问题: 1.ViewGroup的职责是啥? ViewGroup相当于一个放置View的容器,并且我们在写布局xml的时候,会告诉容器(凡是以layout为开头的属 ...

  4. 《Qt Quick 4小时入门》学习笔记4

    http://edu.csdn.net/course/detail/1042/14806?auto_start=1 Qt Quick 4小时入门 第七章:处理鼠标与键盘事件 1.处理鼠标事件 鼠标信号 ...

  5. 【源码】谷歌代理~WPF简单小软件-2015-10-15首发 （2016-03-01已更新源）

    蛋疼,昨天把代理去了后才发现,原来咱们连谷歌应用都访问不了,,,用别人的总觉得不怎么安全,然后今天早上就编了个小软件干掉他这限制==>  GoogleProxy.exe [主要目的:为了能在线安 ...

  6. Spark中决策树源码分析

    1.Example 使用Spark MLlib中决策树分类器API,训练出一个决策树模型,使用Python开发. """ Decision Tree Classifica ...

  7. 创建 router 连通 subnet- 每天5分钟玩转 OpenStack（100）

    上一节我们为 Neutron 虚拟路由器配置好了 L3 agent,今天将创建虚拟路由器“router_100_101”,打通 vlan100 和 vlan101. 打开操作菜单 Project -& ...

  8. T-Sql（五）xml操作

    t-sql中的xml操作在我们平时做项目的过程中用的很少,因为我们处理的数据量很少,除非一些用到xml的地方,t-sql中xml操作一般用在数据量很大,性能优化的地方,当然我在平时做项目的时候也是没用 ...

  9. 1Z0-053 争议题目解析481

    1Z0-053 争议题目解析481 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 481.Which statement is true about a running sessi ...

  10. 1Z0-053 争议题目解析702

    1Z0-053 争议题目解析702 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 702.View the Exhibit and examine the parameter se ...