Adaptor jQuery幻灯片3d动画效果

下载地址

Adaptor是一个轻量级的内容滑块,旨在为开发人员提供一个简单的接口创建酷2 d或3 d动画幻灯片转换。使用方法创建一个视图端口的3 d视角和内添加HTML创建一个框包含幻灯片的内容。

This is slide one"s description

This is slide two"s description

This is slide three"s description

This is slide four"s description

技术上不需要CSS但是如果div.slider-viewport是静态定位的外框插件将使用相对定位,这样就可以保持绝对定位框。应该注意,视窗和盒子应该相同的宽度和高度内容幻灯片,这样旋转没有出现偏离中心。这也是一个好主意来约束视窗的大小,以便幻灯片不喷出页面加载时间。.slider-viewport { width: 560px; height: 380px; overflow: hidden }$("#content-box").boxSlider( /* options */ );下面是一个例子,一个简单的2 d褪色过渡注册插件的褪色效果。(function (w, $, undefined) { w.jqBoxSlider.registerAnimator("fade", (function () { var adaptor = {}; // setup slide and box css adaptor.initialize = function ($box, $slides, settings) { // cache the original css for reset or destroy adaptor._cacheOriginalCSS($box, "box", settings); adaptor._cacheOriginalCSS($slides, "slides", settings); if ("static auto".indexOf($box.css("position")) !== -1) { $box.css("position", "relative"); } $box.css({height: $slides.eq(0).height(), overflow: "hidden"}); $slides .css({ position: "absolute", top: 0, left: 0 }) .filter(":gt(0)").hide(); }; // fade current out and next in adaptor.transition = function (settings) { settings.$nextSlide.fadeIn(settings.speed); settings.$currSlide.fadeOut(settings.speed); }; // reset the original css adaptor.destroy = function ($box, settings) { $box.children().css(settings.origCSS.slides); $box.css(settings.origCSS.box); }; return adaptor; }()));}(window, jQuery || Zepto));

dd: