[科技]基于jQuery和CSS3炫酷圖片3D旋轉幻燈片特效
iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋轉幻燈片特效插件。你可以使用它來制作產品展示、圖片畫廊或者各種幻燈片和輪播圖特效。這款幻燈片插件的特點有：
兼容jQuery。
高度靈活和可定制性。
靈活的用戶界面的設計。
在單個HTML頁面中允許存在多個實例。
可以定制每一個slider的easing效果。
多語言支持。
可以在 iOS 和 Android 上正常工作。
可以選擇自動播放模式下鼠標懸停時停止播放幻燈片。
非常容易調整尺寸。
兼容外部字體(如谷歌字體)。
有預加載進度條顯示。
支持鍵盤控制。
支持移動觸摸屏。
可以通過CSS來自定義樣式。
使用配置簡單易用。
不限制transition效果。
可定制transition配置和transition timing函數(easing)。
可以使用Cubic-bezier函數。
可定制每一個幻燈片的時間。
帶tooltip縮略圖顯示。
可以通過縮略圖或圓點導航按鈕來導航。
可以在所有支持CSS3的現代瀏覽器中工作。
使用方法
HTML結構
該幻燈片的HTML結構可以使用一個簡單的HTML5結構：
<!DOCTYPE html>
<html>
<head>
<title>iPresenter</title>
<!-- Google Webfonts and our stylesheet -->
<link rel="stylesheet" />
<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 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>
</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
});
});