很好用的一款插件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. HTML网页内容转换成字符串（删除从指定字符串到指定字符串）

    背景: 最近遇到个小需求就是将下面字符串去掉无用字符串 <br><br>"你爷爷也喜欢吃鱼嘛."<br><br>我笑了起来,&quo ...

  2. 快速入门系列--WCF--01基础概念

    转眼微软的WCF已走过十个年头,它是微软通信框架的集大成者,将之前微软所有的通信框架进行了整合,提供了统一的应用方式.记得从自己最开始做MFC时,就使用过Named Pipe命名管道,之后做Winfo ...

  3. Form的enctype="multipart/form-data"作用

    <form class="form-horizontal" role="form" method="post" action=&quo ...

  4. 利用border属性制作各种图形。

    这是一个比较正常的 但如果我们把宽度和高度去掉呢? 好像看不太出来对吧,我们来给边框加上不同颜色. 看出啥了没,分明就是每个边都是一个三角形啊. 那假如我想要一个朝下的三角形是不是我只要把border ...

  5. JavaScript的陷阱

    这本来是翻译Estelle Weyl的<15 JavaScript Gotchas>,里面介绍的都是在JavaScript编程实践中平时容易出错或需要注意的地方,并提供避开这些陷阱的方法, ...

  6. 【博客美化】04.自定义地址栏logo

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  7. Android线程之并发处理

    上一篇为大家介绍了关于Looper的简单知识,本篇我们介绍一下多线程的并发处理,我们知道Handler通过sendMessage()发送的消息,首先发送给了Looper,存入Looper的消息栈,之后 ...

  8. Windows Azure Platform Introduction (11) 了解Org ID、Windows Azure订阅、账户

    <Windows Azure Platform 系列文章目录> 了解和掌握Windows Azure相关的基础知识是非常重要的. 问题1:什么叫做Org ID Org ID是Azure C ...

  9. Elasticsearch聚合 之 Range区间聚合

    Elasticsearch提供了多种聚合方式,能帮助用户快速的进行信息统计与分类,本篇主要讲解下如何使用Range区间聚合. 最简单的例子,想要统计一个班级考试60分以下.60到80分.80到100分 ...

  10. SQL Server代理(10/12)：使用代理账号运行作业

    SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. 在这一系列的上一篇,你查看了msdb库下用 ...