个人不太擅长实用JQuery插件，比较喜欢使用原生JS代码，但是制作网站时的难度很大。
今天推荐一个比较实用的插件
地址为：
http://www.htmleaf.com/jQuery/Layout-Interface/201704274479.html
<link rel="stylesheet" href="css/animate.min.css"> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/scrolla.jquery.min.js"></script>
为执行动画的dom元素添加class="animate"
通过data-animate="动画效果"属性设置动画效果
<div class="animate" data-animate="rubberBand"
data-duration="1.0s"
data-delay="0.1s">
动画div内的文字
</div>
data-animate：设置动画效果
data-duration：设置动画持续时间 data-delay：设置动画延迟 在body之后添加初始化插件（一定要在dom元素加载之后进行）
<script type="text/javascript">
$(‘.animate‘).scrolla();
</script>
运行效果图如下：
可以写如下参数来设置配置效果
$(‘.animate‘).scrolla({
mobile: false,
once: false
});
mobile：移动端是否应用
once：是否只执行一次
下面是我自己总结的所有动画效果属性值：bounce flash pulse rubberBand shake headShake swing tada wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRightBig fadeInRight fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInY flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge rollIn rollOut zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp
插件的使用会使网页布局更加方便，但是每个插件有每个插件不同的用法，使用时应注意。
插件也会导致网页加载慢的情况，不需要的插件不要过度使用
时间： 2024-11-05 21:56:20