效果体验：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. Qt 之 数字钟

    本例用来展示 QTimer 的使用,如何定时的更新一个窗口部件. 1  QLCDNumber 类 QLCDNumber 是一种可将数字显示为类似 LCD 形式的窗口部件,它同 QLabel 一样,都继 ...

  2. VS无法设置断点的解决方案

    第一种情况的处理 第二种情况的处理

  3. 前端MVVM框架设计及实现（二）

    在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HTML中放入了太多的逻辑,从而增加了 ...

  4. 谈谈基于OAuth 2.0的第三方认证 [中篇]

    虽然我们在<上篇>分别讨论了4种预定义的Authorization Grant类型以及它们各自的适用场景的获取Access Token的方式,我想很多之前没有接触过OAuth 2.0的读者 ...

  5. JavaScript阻塞剖析与改善

    一.阻塞特性 <高性能JavaScript>一书中,关于第一章“Loading and Execution”,提到了无阻塞加载JavaScript技术,目的是为了提高页面呈现速度. 说到无 ...

  6. 窥探Swift之别具一格的Struct和Class

    说到结构体和类,还是那句话,只要是接触过编程的小伙伴们对这两者并不陌生.但在Swift中的Struct和Class也有着令人眼前一亮的特性.Struct的功能变得更为强大,Class变的更为灵活.St ...

  7. UWP开发之Mvvmlight实践三：简单MVVM实例开发(图文详解付代码)

    在做MVVM各种框架对比之前,我觉得有必要先自己做一个简单的MVVM实现案例比较好,这样就可以看到自己实现的时候有那些不方便的地方.而各种框架又是怎么解决我们这些麻烦的. 案例介绍:用户登录画面,没有 ...

  8. 连连看游戏（dfs）【华为上机题目】

    1 连连看游戏 今天同学给我做了道编程题目,貌似是华为的,题目描述大概是这样的: 给定一个连连看棋盘,棋盘上每个点都有各种图案(用非0数字表示),输入棋盘上的任意两个左标,判断这两个坐标对应的图案是否 ...

  9. WCF 实体更改发布后，如何不影响调用方？

    应用场景:使用 WCF 有一个坏处,就是如果我们经常对 WCF 应用程序更新,有时候调用方也要进行 Update Service,但调用方往往会很多,那么这个工作就会很讨厌,比如 WCF Servic ...

  10. Apache Sqoop - Overview——Sqoop 概述

    Apache Sqoop - Overview Apache Sqoop 概述 使用Hadoop来分析和处理数据需要将数据加载到集群中并且将它和企业生产数据库中的其他数据进行结合处理.从生产系统加载大 ...