很好用的一款插件jQuery+turn.js翻书、文档和杂志3种特效演示


在线预览

下载地址

实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>演示：jQuery+turn.js翻书、文档和杂志</title>

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

        <style type="text/css">

            h3 a{font-size: 14px;margin-right: 10px;cursor: pointer;}

        </style>

    </head>

    <body>

        <h3 style="width:500px;margin:50px auto 0" id="menus">

            <a class="cur" onclick="jumpto('samples/basic/index.html')">演示1：默认翻书效果</a>

            <a onclick="jumpto('samples/docs/index.html')">演示2：翻文档</a>

            <a onclick="jumpto('samples/magazine/index.html')">演示3：翻杂志</a>

            <a onclick="jumpto('samples/steve-jobs/index.html')">演示4：翻steve书</a>

        </h3>

        <iframe id="iframe" src="samples/basic/index.html" width="100%" height="800px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

    </body>

    <script type="text/javascript" src="/static/js/home.js"></script>

</html>

<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">

        $("#menus").children("a").click(function(){

            $(this).addClass("cur").siblings("a").removeClass("cur");

        })

        function jumpto(inputurl) {

            document.getElementById("iframe").src = inputurl

        }

</script>

　　

jQuery+turn.js翻书、文档和杂志3种特效演示的更多相关文章

  1. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  2. 【原创】jQuery插件 - Booklet翻书特效教程（一） 一般设置

    jQuery插件 - Booklet翻书特效教程(一) 一般设置 本文由五月雨恋提供,转载请注明出处. 一.宽高(width/height) 1.自定义大小 $(function(){ // 自定义页 ...

  3. Sencha Cmd 6 和 Ext JS 6 指南文档（部分官方文档中文翻译）

    近期组织了几个程序员网友,正在翻译一部分官方的Sencha Cmd 6 和 Ext JS 6 指南文档. 眼下还没翻译完,大家能够先看看 Sencha Cmd 6 和 Ext JS 6 指南文档  ( ...

  4. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  5. Ext JS 6学习文档-第8章-主题和响应式设计

    Ext JS 6学习文档-第8章-主题和响应式设计 主题和响应式设计 本章重点在 ExtJS 应用的主题和响应式设计.主要有以下几点内容: SASS 介绍和入门 主题 响应式设计 SASS 介绍和入门 ...

  6. Ext JS 6学习文档-第7章-图表

    Ext JS 6学习文档-第7章-图表 使用图表 本章中将探索在 ExtJS 中使用不同类型的图表并使用一个名为费用分析的示例项目结束本章所学.以下是将要所学的内容: 图表类型 条形图 和 柱形图 图 ...

  7. Ext JS 6学习文档-第6章-高级组件

    Ext JS 6学习文档-第6章-高级组件 高级组件 本章涵盖了高级组件,比如 tree 和 data view.它将为读者呈现一个示例项目为 图片浏览器,它使用 tree 和 data view 组 ...

  8. Ext JS 6学习文档-第5章-表格组件(grid)

    Ext JS 6学习文档-第5章-表格组件(grid) 使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 ...

  9. Ext JS 6学习文档-第4章-数据包

    Ext JS 6学习文档-第4章-数据包 数据包 本章探索 Ext JS 中处理数据可用的工具以及服务器和客户端之间的通信.在本章结束时将写一个调用 RESTful 服务的例子.下面是本章的内容: 模 ...

随机推荐

  1. RESTORE DATABASE的standby选项

    RESTORE DATABASE [db1] FROM DISK = N'E:\Backup\db2.bak' , MOVE N'db1_Data' TO N'D:\Data\db2.MDF', MO ...

  2. hibernate（六）一对一映射

    关系映射是指对象之间的关系,并不是指数据库的关系,关系映射是解决当对象处于以下关系之一时,数据库表该如何映射的问题 (一)一对一单向外键关联 1.注解方式配置 创建一个Husband类和Wife类 H ...

  3. CircularSeekBar

    /** * @author Raghav Sood * @version 1 * @date 26 January, 2013 */ package com.appaholics.circularse ...

  4. 动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)

    × 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成 前面的话 前面介绍过动画animation的详细用法,本文主要介绍动画animation的三个效果 漂浮的白云 [效果演示] [简要介绍 ...

  5. QQ左侧滑动显示之按钮切换

    上一篇为大家介绍了关于自定义属性设置方法,本篇我将为大家介绍一下如何通过按钮来控制Menu的显示和隐藏,为了达到这个效果我们需要在SlidingMenu中添加三个方法,用来达到实现上述效果的目的. 我 ...

  6. 序列sequence中的cache问题

    Oracle中序列Sequence的创建语法如下: CREATE SEQUENCE [ schema. ] sequence [ { INCREMENT BY | START WITH } integ ...

  7. 动态单链表的传统存储方式和10种常见操作-C语言实现

    顺序线性表的优点:方便存取(随机的),特点是物理位置和逻辑为主都是连续的(相邻).但是也有不足,比如:前面的插入和删除算法,需要移动大量元素,浪费时间,那么链式线性表 (简称链表) 就能解决这个问题. ...

  8. [Node.js] 使用TypeScript编写Node项目

    原文地址:http://www.moye.me/2015/04/25/using_typescript/ 入 TypeScript 坑有一段时间了,由衷的看好,所以决定在自留地絮叨一番. 是什么 Ty ...

  9. 初探JavaScript（三）——JS带我"碰壁"带我飞

    已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...

  10. Azure MySQL PaaS (2) MySQL PaaS修改时区

    <Windows Azure Platform 系列文章目录> 先挖坑,关于Azure My PaaS的入门介绍以后再写. 我们在创建My SQL PaaS服务的时候,默认的时区是UTC时 ...