效果体验：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. Java 抽象类的理解

    1. 基本概念 用abstract修饰的类是抽象类.如果类中有方法是abstract类型的,那么此类肯定是abstract类型的,也就是说此类的修饰符肯定有abstract(也就是说,有抽象方法的类是 ...

  2. 有关binlog的那点事（三）（mysql5.7.13）

    这次我们要探索更精细的binlog内容,上次讨论的Query_event和Rows_event肯定有让你疑惑不解的问题.Query_event中的status-vars环境变量有哪些,Rows_eve ...

  3. C#设计模式系列：装饰模式（Decorator）

    1. 装饰模式简介 装饰模式动态地给一个对象添加额外的职责.例如一幅画有没有画框都可以挂在墙上,画就是被装饰者.但是通常都是有画框的.在挂在墙上之前,画可以被蒙上玻璃,装到框子里,所以在画上加一层画框 ...

  4. SmtpClient发邮件时为什么用MailMessage.From而不用MailMessage.Sender

    今天在看C#高级编程(第9版)的时候,在768页看到这样的一段代码 SmtpClient sc = new SmtpClient(); sc.Host = "邮箱服务器地址"; M ...

  5. JMM和happens-before原则

    JMM: Java Memory Model(Java内存模型),围绕着在并发过程中如何处理可见性.原子性.有序性这三个特性而建立的模型. 可见性: JMM提供了volatile变量定义.final. ...

  6. 细说gulp

    一.概述&安装 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完 ...

  7. Js权限判断处理

    主要实现自动处理视频点击判断权限. function lookVideo() { var review_con = document.getElementById("review" ...

  8. 源码阅读系列：EventBus

    title: 源码阅读系列:EventBus date: 2016-12-22 16:16:47 tags: 源码阅读 --- EventBus 是人们在日常开发中经常会用到的开源库,即使是不直接用的 ...

  9. Kooboo CMS - Html.FrontHtml[Helper.cs] 各个方法详解

    下面罗列了方法详解,每一个方法一篇文章. Kooboo CMS - @Html.FrontHtml().HtmlTitle() 详解 Kooboo CMS - Html.FrontHtml.Posit ...

  10. jsonp协议原理深度解析

    前言 今天在开发联调的过程中,需要跨域的获取数据,因为使用的jquery,当然使用dataType:'jsonp'就能够很easy的解决了.但是因为当时后端没有支持jsonp来访问,后来他在实现这个功 ...