转载

jQuery和CSS3炫酷图片3D旋转幻灯片特效

简要教程

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

兼容jQuery。

高度灵活和可定制性。

灵活的用户界面的设计。

在单个HTML页面中允许存在多个实例。

可以定制每一个slider的easing效果。

多语言支持。

可以在 iOS 和 Android 上正常工作。

可以选择自动播放模式下鼠标悬停时停止播放幻灯片。

非常容易调整尺寸。

兼容外部字体(如谷歌字体)。

有预加载进度条显示。

支持键盘控制。

支持移动触摸屏。

可以通过CSS来自定义样式。

使用配置简单易用。

不限制transition效果。

可定制transition配置和transition timing函数(easing)。

可以使用Cubic-bezier函数。

可定制每一个幻灯片的时间。

带tooltip缩略图显示。

可以通过缩略图或圆点导航按钮来导航。

可以在所有支持CSS3的现代浏览器中工作。

jQuery和CSS3炫酷图片3D旋转幻灯片特效

查看演示 下载插件

使用方法

HTML结构

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

<!DOCTYPE html> <html>     <head>    <title>iPresenter</title>    <!-- Google Webfonts and our stylesheet -->    <link rel="stylesheet" href="http://fonts.useso.com/css?family=PT+Sans+Narrow" />    <link rel="stylesheet" href="css/styles.css" />    <link rel="stylesheet" href="css/demo1.css" />    <!-- JavaScript includes -->    <script src="js/jquery-1.7.1.min.js"></script>    <script src="js/ipresenter.encoded.js"></script>    <!-- iPresenter script starter Section -->    <script>   $(document).ready(function(){       $('#ipresenter').iPresenter();   });    </script>     </head>     <body>    <!-- BEGIN CONTAINER -->    <div class="container">   <!-- BEGIN #ipresenter element container -->   <div id="ipresenter">       <!-- The Slides Will Go Here -->   </div>   <!-- END #ipresenter element container -->    </div>    <!-- END CONTAINER -->     </body> </html>

div#ipresenter用于包裹整个幻灯片。

<div id="ipresenter">        <!-- The Slides Will Go Here -->    </div>

通过这个幻灯片插件，我们可以创建各种幻灯片切换时的平滑过渡效果。插件通过为每一个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。

示例代码如下：

<!-- The first slide retains its default position. We could omit the data attributes --> <div id="intro" class="step" data-x="0" data-y="0">  <img src="img/details.png" />  <h2>A phone that sees the world like you do, in 3D</h2>  <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> </div> <!-- We are offsetting the second slide, rotating it and making it 1.8 times larger --> <div id="capture" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="180" data-easing="easeInOutQuint">  <img src="img/ksp1.png" />  <h2>Capture life in 3D</h2>  <p>HTC EVO 3D allows you to shoot 3D ** 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> </div> <!-- Same for the rest.. --> <div id="view" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">  <img src="img/ksp2.png" />  <h2>An incredible view</h2>  <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> </div>

CSS样式

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

/* === Preloader Section === */        div#ipresenter div#preloader {         some styles     }        div#ipresenter div#preloader div {         some styles     }    /* === Steps Section === */            div#ipresenter div.step {         some styles     }        /* === Control Navigation Section === */        /* = General = */     a.ipresenter_stepsNav {         some styles     }        /* = Next Button = */     a#ipresenter_nextStep {         some styles     }        /* = Previous Button = */     a#ipresenter_prevStep {         some styles     }        /* = Pagination Buttons Container = */     div.ipresenter-controlNav {         some styles     }        /* = Pagination Previous Buttons = */     div.ipresenter-controlNav a.ipresenter-controlPrevNav {         some styles     }        /* = Pagination Next Button = */     div.ipresenter-controlNav a.ipresenter-controlNextNav {         some styles     }        /* = Pagination Number Button = */     div.ipresenter-controlNav a.ipresenter-control {         some styles     }        /* = Pagination Tooltip = */     div.ipresenter-controlNav div.ipresenter-tooltip {         some styles     }        div.ipresenter-controlNav div.ipresenter-tooltip div {         some styles     }        div.ipresenter-controlNav div.ipresenter-tooltip img {         some styles     }        /* === Playback === */        /* = General = */     #ipresenter-timer {         some styles     }        /* = When its playing = */     #ipresenter-timer.play {         some styles     }        /* = When its paused = */     #ipresenter-timer.pause {         some styles     }

所有的图片样式都放置在div.step中，你可以自定义它们。如果你要修改它们，只需要找到下面的代码：

div#ipresenter div.step img {     change styles here }

JAVASCRIPT

在页面加载之后，可以使用下面的方法调用该幻灯片插件：

$(document).ready(function(){     $('#ipresenter').iPresenter(); });

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

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

阅读推荐：

纯CSS3炫酷全屏3D立方体旋转幻灯片特效

jQuery和CSS3炫酷全屏3D旋转幻灯片特效

来源 jQuery之家

正文到此结束