你的位置:首页 > 软件开发 > Java > 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

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

发布时间:2015-05-07 16:00:18
在线预览 源码下载iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件。你可以使用它来制作产品展示、图片画廊或者各种幻灯片和轮播图特效。这款幻灯片插件的特点有:兼容jQuery。高度灵活和可定制性。灵活的用户界面的设计。在单个 ...

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

基于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" 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='/images/loading.gif' data-original="js/jquery-1.7.1.min.js"></script>    <script src='/images/loading.gif' data-original="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>       

原标题:基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。