jQuery iPresenter 3D图片旋转

在线实例

效果一

效果二

使用方法

1. <div class="htmleaf-container">
2. <div class="htmleaf-content">
3. <div class="container">
4. <div id="ipresenter">
5. <div id="intro" class="step" data-x="0" data-y="0" data-thumbnail="/api/jq/5733e33267b64/img/thumbnails/1.jpg">
6. <img src="/api/jq/5733e33267b64/img/details.png" />
7. <h2>
8. A phone that sees the world like you do, in 3D</h2>
9. <p>
10. Now your photos can have as much depth as the moment itself. HTC EVO 3D captures
11. your photos and videos in 3D, plus you can view them without the glasses. The stunning
12. 4.3-inch qHD display gives you crisp websites, vivid images and incredibly fluid
13. videos.
14. </p>
15. </div>
16. <div id="capture" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="180"  data-thumbnail="/api/jq/5733e33267b64/img/thumbnails/2.jpg">
17. <img src="/api/jq/5733e33267b64/img/ksp1.png" />
18. <h2>
19. Capture life in 3D</h2>
20. <p>
21. HTC EVO 3D allows you to shoot 3D movies and snap 3D photos via dual cameras, so
22. no matter where you are, capture life as it should be. And see it all in true-to-life
23. detail without 3D glasses.
24. </p>
25. </div>
26. <div id="view" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270" data-thumbnail="/api/jq/5733e33267b64/img/thumbnails/3.jpg">
27. <img src="/api/jq/5733e33267b64/img/ksp2.png" />
28. <h2>
29. An incredible view</h2>
30. <p>
31. The large 4.3 inch display serves up incredibly crisp websites, vivid images and
32. fluid video on a pixel-packed qHD screen. Catch the latest blockbusters straight
33. from HTC Watch – a new service that starts the show just seconds into the download
34. and monitors your Internet connection to ensure uninterrupted viewing.
35. </p>
36. </div>
37. </div>
38. </div>
39. </div>
40. </div>
41. <script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.7.2.min.js"></script>
42. <script src="/api/jq/5733e33267b64/js/ipresenter.packed.js"></script>
43. <script>
44. $(function() {
45. $('#ipresenter').iPresenter({
46. timerPadding: -1,//计时器内边距
47. controlNav: true,//是否显示控制按钮
48. controlNavThumbs: true,//是否显示缩略图控制
49. controlNavNextPrev: false //是否显示“上一张”“下一张”导航
50. });
51. });
52. </script>

成功复制

---

下载