<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>后台用户界面</title>
<link rel="icon" type="image/x-icon" href="img/icon.ico" />
<link rel="stylesheet" href="./css/layui.css" media="all">
<style>
.site-doc-icon li{width: 222px;}
.site-doc-icon li .layui-anim{width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}
</style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>动画过程演示</legend>
</fieldset>
<ul class="site-doc-icon site-doc-anim">
<li>
<div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
<div class="code">layui-anim-scale</div>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
<div class="code">layui-anim-scaleSpring</div>
</li>
</ul>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="layui.js" charset="utf-8"></script>
<!--演示动画-->
<script>
layui.use('jquery', function(){
var $ = layui.$;
//演示动画
$('.site-doc-icon .layui-anim').on('click', function(){
var othis = $(this), anim = othis.data('anim');
//停止循环
if(othis.hasClass('layui-anim-loop')){
return othis.removeClass(anim);
}
othis.removeClass(anim);
setTimeout(function(){
othis.addClass(anim);
});
//恢复渐隐
if(anim === 'layui-anim-fadeout'){
setTimeout(function(){
othis.removeClass(anim);
}, 1300);
}
});
});
</script>
</body>
</html>如何实现layui的动画点击效果
猜你喜欢
转载自blog.csdn.net/k912120/article/details/81233389
今日推荐
周排行