在线预览 源码下载iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件。你可以使用它来制作产品展示、图片画廊或者各种幻灯片和轮播图特效。这款幻灯片插件的特点有:兼容jQuery。高度灵活和可定制性。灵活的用户界面的设计。在单个 ...
在线预览 源码下载
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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。