很好用的一款插件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. Ucos系统常用的数据结构有哪些？

    1)表 链表 表中主要了解链表,尤其是单向链表. 2)数组 一维数组 二维数组 使用数组有什么好处,在c语言中,数组是一组连续数字的集合它们数组的下标,代表了数组的相对位置,所以说,在一些高效的查表过 ...

  2. 分析优秀的.NET 文档设计工具Vsdocman 7.1 软件保护技术

    Vsdocman是一个优秀的.NET源代码注释编写工具,方便的以GUI的方式设计.NET源代码的注释. 我们知道.NET源代码的注释是Xml格式的注释,在生成程序集时,只需用选中生成Xml注释,Vis ...

  3. backbone库学习-model

    backbone库的结构: http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html 本文所有例子来自于http://blog.cs ...

  4. Dapper，大规模分布式系统的跟踪系统--转

    原文地址:http://bigbully.github.io/Dapper-translation/ 概述 当代的互联网的服务,通常都是用复杂的.大规模分布式集群来实现的.互联网应用构建在不同的软件模 ...

  5. 增强学习（五）----- 时间差分学习(Q learning, Sarsa learning)

    接下来我们回顾一下动态规划算法(DP)和蒙特卡罗方法(MC)的特点,对于动态规划算法有如下特性: 需要环境模型,即状态转移概率\(P_{sa}\) 状态值函数的估计是自举的(bootstrapping ...

  6. Spring Boot异常处理详解

    在Spring MVC异常处理详解中,介绍了Spring MVC的异常处理体系,本文将讲解在此基础上Spring Boot为我们做了哪些工作.下图列出了Spring Boot中跟MVC异常处理相关的类 ...

  7. Android中Services之异步IntentService

    IntentService:异步处理服务,新开一个线程:handlerThread在线程中发消息,然后接受处理完成后,会清理线程,并且关掉服务. IntentService有以下特点: (1)  它创 ...

  8. JavaScript之旅（三）

    JavaScript之旅(三) 三.函数 在JavaScript中,定义函数的方式如下: function abs(x) { ... return ...; } 如果没有return,返回结果为und ...

  9. 问题：Virtual Box如何复制镜像

    今天遇到的情况就是vagrant启动的默认Virtalbox镜像变了,大致可以处理的方法是 1 修改vagrant的默认virtalbox 2 重新在这个新的virtualbox中安装需要的软件 3 ...

  10. CSS魔法堂：Reset CSS

    下列样式规则可用于最小化各浏览器标签样式的不一致性.注意:实际使用时应该对其进行适当的调整,以适应项目要求. /* http://meyerweb.com/eric/tools/css/reset/ ...