realic
- 浏览: 17798 次
- 性别:
- 来自: 上海
-
最新评论
利用Jmpress.js打造华丽的3D幻灯片切换效果
利用Jmpress.js打造华丽的3D幻灯片切换效果
作者：realic 来源：mxria.com 时间：2012-04-16
[align=center]
[align=left]现在我们来看看CSS样式部分的内容，这部分内容只是实例，大家可以参考着根据自己的需要修改。为了使得幻灯片具有感应效果，我们给主容器jms-slideshow设置最大宽度和最小宽度
[align=left]接下来的包装层是动态添加的，这里用到了CSS3的一些状态变换效果。
[align=left]背景颜色的类将被应用到以前的包装。在类定义的的数据atrribute中设置每一个data-color。这使我们可以为每张幻灯片添加背景颜色和状态过渡。 （过渡期的持续时间将在JavaScript中被重新定义。）
[align=left]每个单一幻灯片的切换过渡时间定义为1s，当前显示的幻灯片opacity为1，而不显示的幻灯片opacity设置为0，这样我们看到的只有一个。
[align=left]下面对单个幻灯片里面的内容进行样式化设置，如下代码是针对内容设置的，大家可以随意更改为自己需要的内容。
.jms-content{
margin: 0px 370px 0px 20px;
position: relative;
clear: both;
}
.step h3{
color: #fff;
font-size: 52px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
margin: 0;
padding: 60px 0 10px 0;
}
.step p {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-size: 34px;
font-weight: normal;
position: relative;
margin: 0;
}
Readmore的链接，我们在每个幻灯片切换完成时，使它过渡切换显示，使用了ease-in-out，增加点情趣，看看CSS3多风骚。img这时采用绝对定位的方式，
a.jms-link{
color: #fff;
text-transform: uppercase;
background: linear-gradient(top, #969696 0%,#727272 100%);
padding: 8px 15px;
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid #444;
border-radius: 4px;
opacity: 1;
margin-top: 40px;
clear: both;
transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
opacity: 0;
margin-top: 80px;
}
.step img{
position: absolute;
right: 0px;
top: 30px;
}
接下来我们对用于导航的圆点进行样式化处理，也是绝对定位的方式，特别提醒就是z-index，一定设置较大值，使之始终显示在最前面
.jms-dots{
width: 100%;
position: absolute;
text-align: center;
left: 0px;
bottom: 20px;
z-index: 2000;
user-select: none;
}
当前显示第几页，则第几个圆点显示出不同的颜色，下面定义当前幻灯圆点
.jms-dots span{
display: inline-block;
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background: #777;
margin: 3px;
cursor: pointer;
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.3);
}
我们使用:after伪元素来实现更加动态的效果，
.jms-dots span.jms-dots-current:after{
content: '';
width: 8px;
height: 8px;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed
100%);
}
下面的内容是设置导航箭头的样式
.jms-arrows{
user-select: none;
}
.jms-arrows span{
position: absolute;
top: 50%;
margin-top: -40px;
height: 80px;
width: 30px;
cursor: pointer;
z-index: 2000;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
left: -10px;
}
.jms-arrows span.jms-arrows-next{
background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
right: -10px;
}
关键的CSS样式定义完毕，接下来我们看看JavaScript代码，这是动起来的关键!
The JavaScript
我们使用jmpres.js这个Jquery插件来设计幻灯效果。这个插件功能很牛，但本例只用到其中很小一部分。如果你感兴趣希望了解jmpress.js更多的内容，可以参考jmpress.js文档.
首先我们生成一个jquery插件，如下定义
$( '#jms-slider' ).jmslideshow();
在本例的插件中我们采用默认设置，options项为默认的。当然您也可以定制化options，参考更多options
jmpressOpts : {
// 设置视野接口
viewPort : {
height : 400,
width : 1300,
maxScale: 1
},
fullscreen : false,
hash : { use : false },
mouse : { clickSelects : false },
keyboard : { use : false },
animation : { transitionDuration : '1s' }
},
可以在插件本身中修改其中的参数，也可以定义一些幻灯效果的属性，例如:
// 定义jmpress 参数
var jmpressOpts = {
animation : { transitionDuration : '0.8s' }
};
// 调用jmpress插件
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts :
jmpressOpts }, {
autoplay : true,
bgColorSpeed: '0.8s',
arrows : false
}));
下面提供了jmpress.js插件可用的一些幻灯显示参数:
$.JMSlideshow.defaults = {
// jmpress plugin的options.
// 你还可以定义更多的参数项
jmpressOpts : {
// set the viewport
viewPort : {
height : 400,
width : 1300,
maxScale: 1
},
fullscreen : false,
hash : { use : false },
mouse : { clickSelects : false },
keyboard : { use : false },
animation : { transitionDuration : '1s' }
},
// for this specific plugin we will have the following options:
// shows/hides navigation arrows
arrows : true,
// shows/hides navigation dots/pages
dots : true,
// each step's bgcolor transition speed
bgColorSpeed: '1s',
// slideshow on / off
autoplay : false,
// time between transitions for the slideshow
interval : 3500
};
一旦jmpress插件调用，首先执行的方法函数是init
_init : function( options ) {
this.options = $.extend( true, {},
$.JMSlideshow.defaults, options );
// 加载幻灯页
this.$slides = $('#jms-slider').children('div');
// 幻灯片总数量
this.slidesCount = this.$slides.length;
// 背景色
this.colors = $.map( this.$slides, function( el,
i ) { return $( el ).data( 'color' ); } ).join( ' ' );
// 建立运行jmpress的基本布局
this._layout();
// 初始化jmpress插件
this._initImpress();
// if support (function implemented in jmpress plugin)
if( this.support ) {
// load some events
this._loadEvents();
// 如果autoplay设置为true，则开始自动显示幻灯页
if( this.options.autoplay ) {
this._startSlideshow();
}
}
},
在_layout()函数中，jmpress会加载一些基本的幻灯结构，包括导航、左右的箭头等
_layout : function() {
// adds a specific class to each one of the steps
this.$slides.each( function( i ) {
$(this).addClass( 'jmstep' + ( i + 1 ) );
} );
// 包装幻灯页. 包装器就是调用jmpress plugin的元素
this.$jmsWrapper = this.$slides.wrapAll( '
class="jms-wrapper"/>' ).parent();
// transition speed for the wrapper bgcolor
this.$jmsWrapper.css( {
'-webkit-transition-duration' : this.options.bgColorSpeed,
'-moz-transition-duration' :
this.options.bgColorSpeed,
'-ms-transition-duration' :
this.options.bgColorSpeed,
'-o-transition-duration' :
this.options.bgColorSpeed,
'transition-duration' :
this.options.bgColorSpeed
} );
// 增加导航箭头
if( this.options.arrows ) {
this.$arrows = $( '' );
if( this.slidesCount > 1 ) {
this.$arrowPrev = $( '
prev"/>' ).appendTo( this.$arrows );
this.$arrowNext = $( '
next"/>' ).appendTo( this.$arrows );
}
this.$el.append( this.$arrows )
}
// 增加导航指示的圆点
if( this.options.dots ) {
this.$dots = $( ''
);
for( var i = this.slidesCount + 1; --i; ) {
this.$dots.append( ( i === this.slidesCount ) ?
'' : '' );
}
if( this.options.jmpressOpts.start ) {
this.$start = this.$jmsWrapper.find(
this.options.jmpressOpts.start ), idxSelected = 0;
( this.$start.length ) ? idxSelected = this.
$start.index() : this.options.jmpressOpts.start = null;
this.$dots.children().removeClass( 'jms-dots-
current' ).eq( idxSelected ).addClass( 'jms-dots-current' );
}
this.$el.append( this.$dots )
}
},
我们在_initImpress函数中初始化jmpress插件.同样通过重定义setActive方法来开关切换当然活动页 保证每次只显示一个页面是激活状态
_initImpress : function() {
var _self = this;
this.$jmsWrapper.jmpress( this.options.jmpressOpts );
// check if supported (function from jmpress.js):
// it adds the class not-suported to the wrapper
this.support = !this.$jmsWrapper.hasClass( 'not-supported' );
// if not supported remove unnecessary elements
if( !this.support ) {
if( this.$arrows ) {
this.$arrows.remove();
}
if( this.$dots ) {
this.$dots.remove();
}
return false;
}
// 重新定义jmpress中的setActive方法
this.$jmsWrapper.jmpress( 'setActive', function( slide, eventData )
{
// 改变当前激活页得圆点类
if( _self.options.dots ) {
// 未当前页设置导航圆点
_self.$dots
.children()
.removeClass( 'jms-dots-current' )
.eq( slide.index() )
.addClass( 'jms-dots-current' );
}
// 删除当前所有的颜色
this.removeClass( _self.colors );
// 增加一个color类
this.addClass( slide.data( 'color' ) );
} );
// 添加幻灯页step的包装类
this.$jmsWrapper.addClass( this.$jmsWrapper.jmpress('active').data(
'color' ) );
},
autoplay为true设置为自动播放时，_startSlideshow和_stopSlideshow是开始和停止幻灯展示的方法
// 开始幻灯显示 autoplay：true
_startSlideshow : function() {
var _self = this;
this.slideshow = setTimeout( function() {
_self.$jmsWrapper.jmpress( 'next' );
if( _self.options.autoplay ) {
_self._startSlideshow();
}
}, this.options.interval );
},
// 停止slideshow
_stopSlideshow : function() {
if( this.options.autoplay ) {
clearTimeout( this.slideshow );
this.options.autoplay = false;
}
},
最后，我们在导航箭头和圆点上加载event事件。注意touchend event已经在jmpress plugin定义好了,当事件触发时，我们需要定义使之停止幻灯显示的动作
_loadEvents : function() {
var _self = this;
// 导航箭头事件
if( this.$arrowPrev && this.$arrowNext ) {
this.$arrowPrev.on( 'click.jmslideshow', function( event ) {
_self._stopSlideshow();
_self.$jmsWrapper.jmpress( 'prev' );
return false;
} );
this.$arrowNext.on( 'click.jmslideshow', function( event ) {
_self._stopSlideshow();
_self.$jmsWrapper.jmpress( 'next' );
return false;
} );
}
// 导航圆点事件
if( this.$dots ) {
this.$dots.children().on( 'click.jmslideshow', function(
event ) {
_self._stopSlideshow();
_self.$jmsWrapper.jmpress( 'goTo', '.jmstep' + (
$(this).index() + 1 ) );
return false;
} );
}
// touchend已经定义在jmpress插件中，我们只需要将其跟停止显示函数_stopSlideshow进行关联.
this.$jmsWrapper.on( 'touchend.jmslideshow', function() {
_self._stopSlideshow();
} );
}
Demo展示：http://tympanus.net/Tutorials/SlideshowJmpress/index.html
英语原文地址：http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/
作者：realic 来源：mxria.com 时间：2012-04-16
[align=center]
[align=left]现在我们来看看CSS样式部分的内容，这部分内容只是实例，大家可以参考着根据自己的需要修改。为了使得幻灯片具有感应效果，我们给主容器jms-slideshow设置最大宽度和最小宽度
[align=left]接下来的包装层是动态添加的，这里用到了CSS3的一些状态变换效果。
[align=left]背景颜色的类将被应用到以前的包装。在类定义的的数据atrribute中设置每一个data-color。这使我们可以为每张幻灯片添加背景颜色和状态过渡。 （过渡期的持续时间将在JavaScript中被重新定义。）
[align=left]每个单一幻灯片的切换过渡时间定义为1s，当前显示的幻灯片opacity为1，而不显示的幻灯片opacity设置为0，这样我们看到的只有一个。
[align=left]下面对单个幻灯片里面的内容进行样式化设置，如下代码是针对内容设置的，大家可以随意更改为自己需要的内容。
.jms-content{
margin: 0px 370px 0px 20px;
position: relative;
clear: both;
}
.step h3{
color: #fff;
font-size: 52px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
margin: 0;
padding: 60px 0 10px 0;
}
.step p {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
font-size: 34px;
font-weight: normal;
position: relative;
margin: 0;
}
Readmore的链接，我们在每个幻灯片切换完成时，使它过渡切换显示，使用了ease-in-out，增加点情趣，看看CSS3多风骚。img这时采用绝对定位的方式，
a.jms-link{
color: #fff;
text-transform: uppercase;
background: linear-gradient(top, #969696 0%,#727272 100%);
padding: 8px 15px;
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid #444;
border-radius: 4px;
opacity: 1;
margin-top: 40px;
clear: both;
transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
opacity: 0;
margin-top: 80px;
}
.step img{
position: absolute;
right: 0px;
top: 30px;
}
接下来我们对用于导航的圆点进行样式化处理，也是绝对定位的方式，特别提醒就是z-index，一定设置较大值，使之始终显示在最前面
.jms-dots{
width: 100%;
position: absolute;
text-align: center;
left: 0px;
bottom: 20px;
z-index: 2000;
user-select: none;
}
当前显示第几页，则第几个圆点显示出不同的颜色，下面定义当前幻灯圆点
.jms-dots span{
display: inline-block;
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
background: #777;
margin: 3px;
cursor: pointer;
box-shadow:
1px 1px 1px rgba(0,0,0,0.1) inset,
1px 1px 1px rgba(255,255,255,0.3);
}
我们使用:after伪元素来实现更加动态的效果，
.jms-dots span.jms-dots-current:after{
content: '';
width: 8px;
height: 8px;
position: absolute;
top: 2px;
left: 2px;
border-radius: 50%;
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed
100%);
}
下面的内容是设置导航箭头的样式
.jms-arrows{
user-select: none;
}
.jms-arrows span{
position: absolute;
top: 50%;
margin-top: -40px;
height: 80px;
width: 30px;
cursor: pointer;
z-index: 2000;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
left: -10px;
}
.jms-arrows span.jms-arrows-next{
background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
right: -10px;
}
关键的CSS样式定义完毕，接下来我们看看JavaScript代码，这是动起来的关键!
The JavaScript
我们使用jmpres.js这个Jquery插件来设计幻灯效果。这个插件功能很牛，但本例只用到其中很小一部分。如果你感兴趣希望了解jmpress.js更多的内容，可以参考jmpress.js文档.
首先我们生成一个jquery插件，如下定义
$( '#jms-slider' ).jmslideshow();
在本例的插件中我们采用默认设置，options项为默认的。当然您也可以定制化options，参考更多options
jmpressOpts : {
// 设置视野接口
viewPort : {
height : 400,
width : 1300,
maxScale: 1
},
fullscreen : false,
hash : { use : false },
mouse : { clickSelects : false },
keyboard : { use : false },
animation : { transitionDuration : '1s' }
},
可以在插件本身中修改其中的参数，也可以定义一些幻灯效果的属性，例如:
// 定义jmpress 参数
var jmpressOpts = {
animation : { transitionDuration : '0.8s' }
};
// 调用jmpress插件
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts :
jmpressOpts }, {
autoplay : true,
bgColorSpeed: '0.8s',
arrows : false
}));
下面提供了jmpress.js插件可用的一些幻灯显示参数:
$.JMSlideshow.defaults = {
// jmpress plugin的options.
// 你还可以定义更多的参数项
jmpressOpts : {
// set the viewport
viewPort : {
height : 400,
width : 1300,
maxScale: 1
},
fullscreen : false,
hash : { use : false },
mouse : { clickSelects : false },
keyboard : { use : false },
animation : { transitionDuration : '1s' }
},
// for this specific plugin we will have the following options:
// shows/hides navigation arrows
arrows : true,
// shows/hides navigation dots/pages
dots : true,
// each step's bgcolor transition speed
bgColorSpeed: '1s',
// slideshow on / off
autoplay : false,
// time between transitions for the slideshow
interval : 3500
};
一旦jmpress插件调用，首先执行的方法函数是init
_init : function( options ) {
this.options = $.extend( true, {},
$.JMSlideshow.defaults, options );
// 加载幻灯页
this.$slides = $('#jms-slider').children('div');
// 幻灯片总数量
this.slidesCount = this.$slides.length;
// 背景色
this.colors = $.map( this.$slides, function( el,
i ) { return $( el ).data( 'color' ); } ).join( ' ' );
// 建立运行jmpress的基本布局
this._layout();
// 初始化jmpress插件
this._initImpress();
// if support (function implemented in jmpress plugin)
if( this.support ) {
// load some events
this._loadEvents();
// 如果autoplay设置为true，则开始自动显示幻灯页
if( this.options.autoplay ) {
this._startSlideshow();
}
}
},
在_layout()函数中，jmpress会加载一些基本的幻灯结构，包括导航、左右的箭头等
_layout : function() {
// adds a specific class to each one of the steps
this.$slides.each( function( i ) {
$(this).addClass( 'jmstep' + ( i + 1 ) );
} );
// 包装幻灯页. 包装器就是调用jmpress plugin的元素
this.$jmsWrapper = this.$slides.wrapAll( '
class="jms-wrapper"/>' ).parent();
// transition speed for the wrapper bgcolor
this.$jmsWrapper.css( {
'-webkit-transition-duration' : this.options.bgColorSpeed,
'-moz-transition-duration' :
this.options.bgColorSpeed,
'-ms-transition-duration' :
this.options.bgColorSpeed,
'-o-transition-duration' :
this.options.bgColorSpeed,
'transition-duration' :
this.options.bgColorSpeed
} );
// 增加导航箭头
if( this.options.arrows ) {
this.$arrows = $( '' );
if( this.slidesCount > 1 ) {
this.$arrowPrev = $( '
prev"/>' ).appendTo( this.$arrows );
this.$arrowNext = $( '
next"/>' ).appendTo( this.$arrows );
}
this.$el.append( this.$arrows )
}
// 增加导航指示的圆点
if( this.options.dots ) {
this.$dots = $( ''
);
for( var i = this.slidesCount + 1; --i; ) {
this.$dots.append( ( i === this.slidesCount ) ?
'' : '' );
}
if( this.options.jmpressOpts.start ) {
this.$start = this.$jmsWrapper.find(
this.options.jmpressOpts.start ), idxSelected = 0;
( this.$start.length ) ? idxSelected = this.
$start.index() : this.options.jmpressOpts.start = null;
this.$dots.children().removeClass( 'jms-dots-
current' ).eq( idxSelected ).addClass( 'jms-dots-current' );
}
this.$el.append( this.$dots )
}
},
我们在_initImpress函数中初始化jmpress插件.同样通过重定义setActive方法来开关切换当然活动页 保证每次只显示一个页面是激活状态
_initImpress : function() {
var _self = this;
this.$jmsWrapper.jmpress( this.options.jmpressOpts );
// check if supported (function from jmpress.js):
// it adds the class not-suported to the wrapper
this.support = !this.$jmsWrapper.hasClass( 'not-supported' );
// if not supported remove unnecessary elements
if( !this.support ) {
if( this.$arrows ) {
this.$arrows.remove();
}
if( this.$dots ) {
this.$dots.remove();
}
return false;
}
// 重新定义jmpress中的setActive方法
this.$jmsWrapper.jmpress( 'setActive', function( slide, eventData )
{
// 改变当前激活页得圆点类
if( _self.options.dots ) {
// 未当前页设置导航圆点
_self.$dots
.children()
.removeClass( 'jms-dots-current' )
.eq( slide.index() )
.addClass( 'jms-dots-current' );
}
// 删除当前所有的颜色
this.removeClass( _self.colors );
// 增加一个color类
this.addClass( slide.data( 'color' ) );
} );
// 添加幻灯页step的包装类
this.$jmsWrapper.addClass( this.$jmsWrapper.jmpress('active').data(
'color' ) );
},
autoplay为true设置为自动播放时，_startSlideshow和_stopSlideshow是开始和停止幻灯展示的方法
// 开始幻灯显示 autoplay：true
_startSlideshow : function() {
var _self = this;
this.slideshow = setTimeout( function() {
_self.$jmsWrapper.jmpress( 'next' );
if( _self.options.autoplay ) {
_self._startSlideshow();
}
}, this.options.interval );
},
// 停止slideshow
_stopSlideshow : function() {
if( this.options.autoplay ) {
clearTimeout( this.slideshow );
this.options.autoplay = false;
}
},
最后，我们在导航箭头和圆点上加载event事件。注意touchend event已经在jmpress plugin定义好了,当事件触发时，我们需要定义使之停止幻灯显示的动作
_loadEvents : function() {
var _self = this;
// 导航箭头事件
if( this.$arrowPrev && this.$arrowNext ) {
this.$arrowPrev.on( 'click.jmslideshow', function( event ) {
_self._stopSlideshow();
_self.$jmsWrapper.jmpress( 'prev' );
return false;
} );
this.$arrowNext.on( 'click.jmslideshow', function( event ) {
_self._stopSlideshow();
_self.$jmsWrapper.jmpress( 'next' );
return false;
} );
}
// 导航圆点事件
if( this.$dots ) {
this.$dots.children().on( 'click.jmslideshow', function(
event ) {
_self._stopSlideshow();
_self.$jmsWrapper.jmpress( 'goTo', '.jmstep' + (
$(this).index() + 1 ) );
return false;
} );
}
// touchend已经定义在jmpress插件中，我们只需要将其跟停止显示函数_stopSlideshow进行关联.
this.$jmsWrapper.on( 'touchend.jmslideshow', function() {
_self._stopSlideshow();
} );
}
Demo展示：http://tympanus.net/Tutorials/SlideshowJmpress/index.html
英语原文地址：http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/
分享到：
发表评论
相关推荐
总的来说，jmpress.js是一个强大的工具，它利用jQuery库的力量，为网页开发人员提供了一种创造性的方法来构建引人注目的3D幻灯片展示，同时提供了丰富的自定义选项，以满足各种项目需求。无论是展示产品、分享故事...
jmpress.js是一款高度定制化的插件，它扩展了传统网页的滚动和导航方式，将页面转换为3D空间中的平移和缩放效果。这个插件的核心理念是利用CSS3的transform和transition属性，结合jQuery的事件处理和DOM操作，实现...
一个jQuery的impress.js实现，基于CSS3变化和过度效果。只支持现代浏览器，所以只支持Chrome，Safari和Firefox10支持，当然以后肯定支持所有的浏览器 标签：jmpress
用于 Meteor 的 Jmpress.js 这个流星包是的原始端口 安装 meteor add djedi:jmpress 用法 $('#jmpress').jmpress(); 原始文档： : 原始演示： :
总结来说，“Scientific-Social-Network: Impress.js 测试可缩放信息图表”项目利用JavaScript和jmpress.js，提供了一种创新的方式，将科学社交网络的数据以动态、可交互的形式展示出来，为用户提供了深入理解和探索...
jmpress 是一个基于 JavaScript 的库，它扩展了传统幻灯片的展示方式，使得演示更加生动、交互性强。这种技术通常用于制作平移和缩放效果丰富的网页演示文稿。 【描述】：“jmpress-演示 我的 jmpress 演示站点” ...
角-jmpress jmpress 的角度模块适配器 免责声明： 这个项目是一个WORK IN ...您必须选择circular.js ，它使用默认方法（next、prev、home 等）处理选择幻灯片的默认机制，或者您可以使用 jmpress 插件工具滚动自
用下载代码向presentation文件夹添加一个适用于左右箭头键（impress.js、jmpress.js、reveal.js等）的演示文稿从获取对等密钥，将其添加到 script.js 的顶部将所有内容上传到主机在两个浏览器中打开应用将一个浏览器...
slide的属性映射到 jmpress 的属性（不带data-前缀）： x (jmpress: 数据-x) y (jmpress: 数据-y) z (jmpress: 数据-z) r (jmpress: 数据-r) phi (jmpress: 数据-phi) 规模（jmpress：数据规模） s
用流星制作的React式和令人印象深刻的演示系统 安装 安装 Meteor 克隆工作区中的存储库 ... djedi:jmpress djedi:pres-jmpress djedi:pres-collections djedi:pres-interactions djedi:pres-edition