效果体验：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. 收集的React.JS资料

    主页 http://facebook.github.io/react/ https://github.com/facebook/react   中文站 http://www.reactjs.cn/ h ...

  2. JSON和JS对象之间的互转

    1. jQuery插件支持的转换方式 $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2. 浏览器支持的 ...

  3. 《ES6基础教程》之 Call 方法和 Apply 方法

    <script type="text/javascript"> // Call方法: // 语法:call(thisObj[,arg1,arg2,...,argN]) ...

  4. MySQL学习笔记十一：数据导入与导出

    数据导入 1.mysqlimport命令行导入数据 在使用mysqlimport命令导入数据时,数据来源文件名要和目标表一致,不想改文件名的话,可以复制一份创建临时文件,示例如下. 建立一个文本use ...

  5. ASP.NET：注销功能实现

    原理:清空Session 1.Web窗体:index.aspx <a href="logoutHandler.ashx">注销</a> 2.一般处理程序:L ...

  6. php变量－单引号不编译，双引号编译

    <?php header("Content-type:text/html;charset='utf8'"); error_reporting(E_ALL); $sTemp = ...

  7. C/C++ 双精度double 数据相加出错缺陷解释

    不知道有没有人和我一样遇到过这样一个问题,请看下面代码. #include<iostream> using namespace std; int main(){ double a=2.3, ...

  8. C++面向对象

    此博文仅作为C++考研专业课的复习内容. 面向对象 构造函数 在对象被创建的时候将自动调用. 复制构造函数 形参是本类对象的引用.其作用是使用一个已经存在的对象,去初始化一个同类的新对象. 复制构造函 ...

  9. IE6下的png透明图片的背景定位

    在IE6下PNG透明图片做背景,无法使用background-position进行定位.但是可以使用margin和绝对定位来进行. 另外,由于IE6下的 :hover 只对<a>支持,对其 ...

  10. JavaWeb路径问题打包总结--小心出门右转404

    话说,培训和自学就不是一个回事,两周讲完java基础,两天讲完jsp,两节课讲完servlet,还真不是一般人能受得了的,这两天学习jsp和servlet频繁被路径问题困扰,倒不是出错,只是各种act ...