你的位置:首页 > Java教程

[Java教程]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="http://www.cnblogs.com//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="http://www.cnblogs.com//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="http://www.cnblogs.com//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="http://www.cnblogs.com//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>
成功复制

下载