1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > html5 幻灯片动画效果 18种响应式分层动画jQuery幻灯片特效

html5 幻灯片动画效果 18种响应式分层动画jQuery幻灯片特效

时间:2019-12-03 12:05:57

相关推荐

html5 幻灯片动画效果 18种响应式分层动画jQuery幻灯片特效

这是一款效果非常炫酷的响应式分层动画jQuery幻灯片特效。该幻灯片每一组动画分为多个层,每一层可以使用不同的动画效果,共有18种不同的效果可以选择。

所有的动画效果都是通过js来在页面中插入CSS代码来实现的。

使用方法

使用该幻灯片前先要引入jQuery和responsive-layered-slider.js文件。

HTML结构

该幻灯片的基本HTML结构如下:

data-current="true" data-progress="true">

data-width和data-height是幻灯片的最大宽度和最大高度。data-animation是各个层的动画时间。data-current是指定是否显示在下方的当前幻灯片的指示器,可以设置为true或false。data-progress是指定是否显示进度条。

在div.sim-slider-inner中的HTML代码结构如下:

在这里你可以插入多个你需要的图层(每一个div.sim-slider-layer是一个图层)。但是图层中只可以放置图片,最好是PNG图片。并且图片的尺寸不能大于幻灯片的尺寸。

上面的data-width和data-height是图层的宽度和高度。data-left和data-top分别是左边距和上边距。data-effect是图层动画的效果,可用的动画效果有18种:

data-effect="bounceIn"

data-effect="fadeIn"

data-effect="rollIn"

data-effect="fadeInDown"

data-effect="fadeInDownBig"

data-effect="fadeInUp"

data-effect="fadeInUpBig"

data-effect="fadeInLeft"

data-effect="fadeInLeftBig"

data-effect="fadeInRight"

data-effect="fadeInRightBig"

data-effect="flipInX"

data-effect="flipInY"

data-effect="zoomIn"

data-effect="zoomInDown"

data-effect="zoomInUp"

data-effect="zoomInLeft"

data-effect="zoomInRight"

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。