当前位置：首页 > 网页特效 > 其他

内置36种DOM元素动画的jQuery响应式布局插件

分类：其他日期：2024-05-14 点击(5) 评论(0)

简介

首先需要引入必要的js和css文件。

```html
<link rel="stylesheet" type="text/css" href="core/animate.css" />
<script src="js/jquery.min.js"></script>   
<script src="core/magicLayout.js"></script>    
```            
#####  HTML结构
在该布局的HTML结构中，你可以通过layer class来指定层，还可以使用一些data-*属性，这些属性的描述如下：

- data-show-effect：显示的动画效果。
- data-show-dela：动画的延迟时间，单位毫秒。
- data-time：动画的时间，单位毫秒。
如下面是一个简单布局结构：

```html
<div id="english_portfolio" class="dt_container dt_container_columns3 projects">  
  <a href="#" target="blank" class="dt_container_item demo_stas_project layer" data-show-effect="zoomIn" data-show-delay="400">
    <h3 class="project_item">Responsive modal window</h3>
  </a>
  <a href="#" target="blank" class="dt_container_item demo_stas_project layer" data-show-effect="zoomIn" data-show-delay="600">
    <h3 class="demo_stas_project_item">Responsive modal window</h3>
  </a>
  <a href="#" target="blank" class="dt_container_item demo_stas_project layer" data-show-effect="zoomIn" data-show-delay="800">
    <h3 class="demo_stas_project_item">Responsive modal window</h3>
  </a>
</div>
```
##### 初始化插件
在页面DOM元素加载完毕之后，可以通过animationLayout()方法来初始化该布局插件。

```html
(function($){
  $(this).animationLayout({
    container: $('#action_layout')
  });
})(jQuery);
```
#####  36种动画效果
下面列出了所有可用的动画效果。

动画效果的class名称

| jump  | shine  | impulse  | elastic  |
| ------------ | ------------ | ------------ | ------------ |
|jitter|shine|jump|jumpIn|
|jumpInDown|jumpInLeft|jumpInRight|jumpInUp|
|jump|fadeIn|fadeInDown|fadeInDownBig|
|fadeInLeft|fadeInLeftBig|fadeInRight|fadeInRightBig|
|fadeInUp|fadeInUpBig|flipInX|flipInY|
|lightSpeedIn|rotateIn|rotateInDownLeft|rotateInDownRight|
|rotateInUpLeft|rotateInUpRight|rollIn|zoomIn|
|zoomInDown|zoomInLeft|zoomInRight|zoomInUp|

web299.com

内置36种DOM元素动画的jQuery响应式布局插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果