在线预览   源码下载

iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件。你可以使用它来制作产品展示、图片画廊或者各种幻灯片和轮播图特效。这款幻灯片插件的特点有：

  • 兼容jQuery。
  • 高度灵活和可定制性。
  • 灵活的用户界面的设计。
  • 在单个HTML页面中允许存在多个实例。
  • 可以定制每一个slider的easing效果。
  • 多语言支持。
  • 可以在 iOS 和 Android 上正常工作。
  • 可以选择自动播放模式下鼠标悬停时停止播放幻灯片。
  • 非常容易调整尺寸。
  • 兼容外部字体（如谷歌字体）。
  • 有预加载进度条显示。
  • 支持键盘控制。
  • 支持移动触摸屏。
  • 可以通过CSS来自定义样式。
  • 使用配置简单易用。
  • 不限制transition效果。
  • 可定制transition配置和transition timing函数（easing）。
  • 可以使用Cubic-bezier函数。
  • 可定制每一个幻灯片的时间。
  • 带tooltip缩略图显示。
  • 可以通过缩略图或圆点导航按钮来导航。
  • 可以在所有支持CSS3的现代浏览器中工作。

使用方法

HTML结构

该幻灯片的HTML结构可以使用一个简单的HTML5结构：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>iPresenter</title>
  5.  
  6.         <!-- Google Webfonts and our stylesheet -->
  7.         <link rel="stylesheet" href="http://fonts.useso.com/css?family=PT+Sans+Narrow" />
  8.         <link rel="stylesheet" href="css/styles.css" />
  9.         <link rel="stylesheet" href="css/demo1.css" />
  10.  
  11.         <!-- JavaScript includes -->
  12.         <script src="js/jquery-1.7.1.min.js"></script>
  13.         <script src="js/ipresenter.encoded.js"></script>
  14.  
  15.         <!-- iPresenter script starter Section -->
  16.         <script>
  17.             $(document).ready(function(){
  18.                 $('#ipresenter').iPresenter();
  19.             });
  20.         </script>
  21.     </head>
  22.     <body>
  23.  
  24.         <!-- BEGIN CONTAINER -->
  25.         <div class="container">
  26.  
  27.             <!-- BEGIN #ipresenter element container -->
  28.             <div id="ipresenter">
  29.  
  30.                 <!-- The Slides Will Go Here -->
  31.  
  32.             </div>
  33.             <!-- END #ipresenter element container -->
  34.  
  35.         </div>
  36.         <!-- END CONTAINER -->
  37.  
  38.     </body>
  39. </html>

通过这个幻灯片插件，我们可以创建各种幻灯片切换时的平滑过渡效果。插件通过为每一个div设置不同的data属性，这些data属性会转换为真正的CSS3动画效果。下面是所有可用的data属性：

  • data-easing：easing timing函数（也可接收cubic-bezier函数）。

    • linear
    • ease
    • ease-in
    • ease-out
    • ease-in-out
    • ease-out-in
    • easeInQuad
    • easeOutQuad
    • easeInOutQuad
    • easeInCubic
    • easeOutCubic
    • easeInOutCubic
    • easeInQuart
    • easeOutQuart
    • easeInOutQuart
    • easeInQuint
    • easeOutQuint
    • easeInOutQuint
    • easeInSine
    • easeOutSine
    • easeInOutSine
    • easeInExpo
    • easeOutExpo
    • easeInOutExpo
    • easeInCirc
    • easeOutCirc
    • easeInOutCirc
    • easeInBack
    • easeOutBack
    • easeInOutBack
  • data-pausetime：slide多久才会显示。
  • data-x, data-y, data-z：将幻灯片在屏幕3D空间中移动。
  • data-rotate, data-rotate-x, data-rotate-y, data-rotate-z：沿指定的轴旋转元素，单位degrees。
  • data-scale：放大或缩小幻灯片。
  • data-thumbnail：缩略图的url。

示例代码如下：

  1. <!-- The first slide retains its default position. We could omit the data attributes -->
  2. <div id="intro" class="step" data-x="0" data-y="0">
  3.     <img src="img/details.png" />
  4.     <h2>A phone that sees the world like you do, in 3D</h2>
  5.     <p>Now your photos can have as much depth as the moment itself. HTC EVO 3D captures your photos and videos in 3D, plus you can view them without the glasses. The stunning 4.3-inch qHD display gives you crisp websites, vivid images and incredibly fluid videos.</p>
  6. </div>
  7.  
  8. <!-- We are offsetting the second slide, rotating it and making it 1.8 times larger -->
  9. <div id="capture" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="180" data-easing="easeInOutQuint">
  10.     <img src="img/ksp1.png" />
  11.     <h2>Capture life in 3D</h2>
  12.     <p>HTC EVO 3D allows you to shoot 3D movies and snap 3D photos via dual cameras, so no matter where you are, capture life as it should be. And see it all in true-to-life detail without 3D glasses.</p>
  13. </div>
  14.  
  15. <!-- Same for the rest.. -->
  16. <div id="view" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
  17.     <img src="img/ksp2.png" />
  18.     <h2>An incredible view</h2>
  19.     <p>The large 4.3 inch display serves up incredibly crisp websites, vivid images and fluid video on a pixel-packed qHD screen. Catch the latest blockbusters straight from HTC Watch � a new service that starts the show just seconds into the download and monitors your Internet connection to ensure uninterrupted viewing.</p>
  20. </div>
CSS样式

该幻灯片插件中有两个主要的CSS样式文件，一个是styles.css，这个样式表用于生成页面的通用样式，如字体、链接等样式。第二个对应每个demo的样式表，分为demo1.css和demo2.css，分别用于为两个demo指定样式：

  1. /* === Preloader Section === */
  2.  
  3.     div#ipresenter div#preloader {
  4.         some styles
  5.     }
  6.  
  7.     div#ipresenter div#preloader div {
  8.         some styles
  9.     }
  10.  
  11. /* === Steps Section === */
  12.  
  13.     div#ipresenter div.step {
  14.         some styles
  15.     }
  16.  
  17. /* === Control Navigation Section === */
  18.  
  19.     /* = General = */
  20.     a.ipresenter_stepsNav {
  21.         some styles
  22.     }
  23.  
  24.     /* = Next Button = */
  25.     a#ipresenter_nextStep {
  26.         some styles
  27.     }
  28.  
  29.     /* = Previous Button = */
  30.     a#ipresenter_prevStep {
  31.         some styles
  32.     }
  33.  
  34.     /* = Pagination Buttons Container = */
  35.     div.ipresenter-controlNav {
  36.         some styles
  37.     }
  38.  
  39.     /* = Pagination Previous Buttons = */
  40.     div.ipresenter-controlNav a.ipresenter-controlPrevNav {
  41.         some styles
  42.     }
  43.  
  44.     /* = Pagination Next Button = */
  45.     div.ipresenter-controlNav a.ipresenter-controlNextNav {
  46.         some styles
  47.     }
  48.  
  49.     /* = Pagination Number Button = */
  50.     div.ipresenter-controlNav a.ipresenter-control {
  51.         some styles
  52.     }
  53.  
  54.     /* = Pagination Tooltip = */
  55.     div.ipresenter-controlNav div.ipresenter-tooltip {
  56.         some styles
  57.     }
  58.  
  59.     div.ipresenter-controlNav div.ipresenter-tooltip div {
  60.         some styles
  61.     }
  62.  
  63.     div.ipresenter-controlNav div.ipresenter-tooltip img {
  64.         some styles
  65.     }
  66.  
  67. /* === Playback === */
  68.  
  69.     /* = General = */
  70.     #ipresenter-timer {
  71.         some styles
  72.     }
  73.  
  74.     /* = When its playing = */
  75.     #ipresenter-timer.play {
  76.         some styles
  77.     }
  78.  
  79.     /* = When its paused = */
  80.     #ipresenter-timer.pause {
  81.         some styles
  82.     }

下面列出了该幻灯片插件所有可用的参数：

  1. $(document).ready(function(){
  2.     $('#ipresenter').iPresenter({
  3.         easing: 'ease-in-out', // Easing timing (custom cubic-bezier function is acceptable)
  4.         autoPlay: true, // To Enable or Disable the autoplay
  5.         replay: true, // To repeat all steps from beginning
  6.         animSpeed: 1000, // To set the speed of the switch animation (Microsecond)
  7.         pauseTime: 5000, // To set the time of the pause between steps (Microsecond)
  8.         directionNav: true, // Next & Previous navigation
  9.         directionNavHoverOpacity: 0.6, // Fade on hover
  10.         controlNav: true, // 1,2,3,4... navigation
  11.         controlNavNextPrev: true, // previous,next navigation
  12.         controlNavHoverOpacity: 0.6, // Navigation fade on hover
  13.         controlNavThumbs: false, // Show thumbs navigation
  14.         controlNavTooltip: true, // Show thumbs Tooltip
  15.         keyboardNav: true, // To Enable or Disable the keyboard navigation
  16.         pauseOnHover: false, // To Enable or Disable the slideshow when mouse come over it
  17.         itemsOpacity: 0.4, // To set the value of the opacity for the steps
  18.         randomStart: false, // Start on a random step
  19.         startStep: 0, // Set starting Step (0 index)
  20.         timer: 'Pie', // Timer style: "Pie", "360Bar" or "Bar"
  21.         timerBg: '#000', // Timer background
  22.         timerColor: '#EEE', // Timer color
  23.         timerOpacity: 0.5, // Timer opacity
  24.         timerDiameter: 30, // Timer diameter
  25.         timerPadding: 4, // Timer padding
  26.         timerStroke: 3, // Timer stroke width
  27.         timerBarStroke: 1, // Timer Bar stroke width
  28.         timerBarStrokeColor: '#EEE', // Timer Bar stroke color
  29.         timerBarStrokeStyle: 'solid', // Timer Bar stroke style
  30.         timerPosition: 'top-right', // Timer position (top,middle,bottom)-(left-center-right) set like: 'middle-center'
  31.         nextLabel: "Next", // To set the string of the next button (Multilanguage use)
  32.         previousLabel: "Previous", // To set the string of the previous button (Multilanguage use)
  33.         playLabel: "Play", // To set the string of the play button (Multilanguage use)
  34.         pauseLabel: "Pause", // To set the string of the pause button (Multilanguage use)
  35.         onBeforeChange: function(){}, // Triggers before a step change
  36.         onAfterChange: function(){}, // Triggers after a step change
  37.         onLastStep: function(){}, // Triggers when last step is shown
  38.         onAfterLoad: function(){}, // Triggers when slider has loaded
  39.         onPause: function(){}, // Triggers when slider has paused
  40.         onPlay: function(){} // Triggers when slider has played
  41.     });
  42. });

via：http://www.w2bc.com/Article/36204

基于jQuery和CSS3炫酷图片3D旋转幻灯片特效的更多相关文章

  1. 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件

    这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览   ...

  2. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  3. jQuery和CSS3炫酷button点击波特效

    这是一款效果很炫酷的jQuery和CSS3炫酷button点击波特效.该特效当用户在菜单button上点击的时候.从鼠标点击的点開始,会有一道光波以改点为原点向外辐射的动画效果,很绚丽. 在线演示:h ...

  4. 纯CSS炫酷的3D旋转

    <html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...

  5. 一款纯css3实现的图片3D翻转幻灯片

    之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览   源码下载 实现的代码. ht ...

  6. 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

    分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...

  7. 基于css3炫酷页面加载动画特效代码

    基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  8. jQuery和CSS3炫酷GOOGLE样式的用户登录界面

    这是一款使用jQuery和CSS3打造的GOOGLE样式的用户登录界面特效.该登录界面特效中,右上角的小问号和错误提示小图标使用SVG来制作.username和password输入框採用浮动标签特效. ...

  9. css3相册图片3D旋转展示特效

    查看效果:http://hovertree.com/texiao/css/14/ 本效果用css3的animation实现动画 定义和用法animation 属性是一个简写属性,用于设置六个动画属性: ...

随机推荐

  1. CentOS 7 systemd的坑

    一.概述 在从 CentOS 6 迁移到 CentOS 7 的过程中,可能有一些地方需要调整,最显著的地方莫过于 systemd 带来的改变,不同的管理服务的方式,不同的日志方式,设置时区,时间等等. ...

  2. bootstrap-datepicker限定可选时间范围

    此项目是 bootstrap-datetimepicker 项目 的一个分支,原项目不支持  Time 选择. 其它部分也进行了改进.增强,例如 load 过程增加了对 ISO-8601 日期格式的支 ...

  3. 【MongoDB】MongoDB的一些操作命令

    我们首先应该知道MongoDB的数据结构:MongoDB:库-->集合-->JSON对象 查看 show dbs //查看有哪些库    show collections //查看库中有哪 ...

  4. java JDK JRE 1.6,1.7,1.8各个版本版本下载链接

    有时想找jdk的某个版本并不太好找,在此给出所有链接及对应的api JavaSE 1.6各个版本 jdk  api http://www.Oracle.com/technetwork/Java/jav ...

  5. mysql 查询 根据时分秒取数据 比如 取 时间为 8点半的 dateformat 时间函数转换

     date_format(date,'%H') = 8 and date_format(date,'%i') = 30   SELECT * FROM `t_pda_trucklog` WHERE D ...

  6. golang ----rune数据类型

    查询,官方的解释如下: // rune is an alias for int32 and is equivalent to int32 in all ways. It is // used, by ...

  7. U811.1接口EAI系列之二-BOM构成-委外BOM构成--VB语言

    1.下面代码实现了VB6.0中调用U8EAI-BOM构成服务,以下代码均为项目实际代码,可直接复制应用. 2.在u811.1版本中委外BOM构成与正常的BOM构成是同系列表,不单独存储. 3.是以存货 ...

  8. c# xml 输出注释格式控制

    string str="\n\t///*! 妆容类物品子分类 */\n\tenum MakeupSubType\n\t{\n\t\tItem_InvalidMakeupSubType = - ...

  9. Shiro（一）：shiro架构和组件介绍

    简介 Apache Shiro是一个强大且易用的Java安全框架,执行身份认证.授权.加密和会话管理.使用Shiro的易于理解的API,可以快速.轻松地获得任何应用程序,从最小的移动应用程序到最大的网 ...

  10. Android adb 命令速查表

    常用命令 devices # 查看已连接的设备 start-server # 启动 adb server kill-server # 停止 adb server logcat # 查看日志 insta ...